cssのinput:validはrequiredがないとたぶんうまく機能しない

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 を設定しないと、文字が入力されてフォーカスが外れたときにもとのデザインにならない。入力でラベルが動くデザインは上のコードがベースになる。