css の input:valid は required がないとうまく機能しない。
<li class="login-input-label"> <input type="text" id="login-name" required> <label for="login-name">ユーザー名</label> </li> <li class="login-input-label"> <input type="password" id="login-password" required> <label for="login-password">パスワード</label> </li>
input:valid にデザインをあてるときは input に required をあてないといけない（たぶん）。ちなみに下の css は input にフォーカスしたときにラベルが小さくなるデザイン。
.login-input-label input ~ label { color: #666; font-size: 15px; position: absolute; top: 24px; } .login-input-label input { border-bottom: 1px solid #f0f0f0; font-size: 17px; padding-bottom: 6px; width: 100%; position: absolute; bottom: 0; } .login-input-label input:focus ~ label { font-size: 10px; top: 0; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } .login-input-label input:not(:focus) ~ label { font-size: 15px; top: 24px; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } .login-input-label input:valid ~ label { font-size: 10px; top: 0; }
input:valid を設定しないと、文字が入力されてフォーカスが外れたときにもとのデザインにならない。入力でラベルが動くデザインは上のコードがベースになる。
