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>

.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;
}