Почему не работает valid вместе с focus в CSS?

Question

[Valenco]

<div class="reg-form">
    <form action="">
        <h2>Регистрация</h2>
        <div class="form">
            <div class="input-box">
                <input type="text" >
                <label for="">Логин</label>
            </div>
            <div class="input-box">
                <input type="text">
                <label for="">Электронная почта</label>
            </div>
            <div class="input-box">
                <input type="password">
                <label for="">Пароль</label>
            </div>
            <div class="input-box">
                <input type="password">
                <label for="">Пароль повторно</label>
            </div>
            <input type="submit" class="reg-but" value="Создать аккаунт">
        </div>
    </form>
</div>

form {
    height: 470px;
    width: 470px;
    background-color: rgb(37, 34, 83);
    border-radius: 20px;
    color: aliceblue;
    box-shadow: 20px 20px 10px rgb(21, 19, 46);
}

.form {
    width: 55%;
    margin-left: 105px;
}
.input-box{
    position: relative;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
    border-bottom: 2px solid rgb(27, 24, 65);
}

.input-box input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    height: 35px;
    font-size: 21px;
    padding: 5px;
    color: aliceblue;
    border: none;
    outline:none;
}
.input-box label{
    position: absolute;
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    transition: 0.5s;
    pointer-events: none;
    font-size: 17px;
}
.input-box input:focus~label,
.input-box input:valid~label{
    font-size: 12px;
    top: -5px;
}

.reg-but{
    width: 100%;
    background-color: #111257;
    border-radius: 10px;
    border: none;
    font-size: 19px;
    color: white;
    height: 40px;
    padding: 5px;

}

когда убираю .input-box input:valid~label , начинает работать .input-box input:focus~label , но label возвращается обратно, когда возвращаю, то уже нет никакой анимации. Почему они не работают виесте ?

Answer 1

[szQocks]

добавь аттрибут require для инпута

Comments

[Valenco]

Но что если я сделал на стороне сервера свою валидацию, которая проверяет, написал ли что-то пользователь?

[szQocks]

Valenco, https://codepen.io/kapysta-xxl/pen/qBvYMbR