:valid в CSS — стиль правильно заповненого поля форми

HTML

<div class="cols">
    <form class="card naive">
        <h4>Наївно: <code>:invalid</code></h4>
        <label>Ім'я (обов'язкове)
            <input name="a1" required placeholder="Олена"></label>
        <label>Пошта
            <input name="a2" type="email" placeholder="[email protected]"></label>
        <label>Вік від 18 до 120
            <input name="a3" type="number" min="18" max="120" placeholder="30"></label>
        <p class="verdict">Форма розфарбована ще до першого кліку: обов'язкове
            поле червоне, хоча в нього ніхто не заглядав, а два інші зелені,
            хоча вони так само порожні. Обидва сигнали брехливі.</p>
    </form>

    <form class="card polite">
        <h4>Полагоджено: <code>:user-invalid</code></h4>
        <label>Ім'я (обов'язкове)
            <input name="b1" required placeholder="Олена"></label>
        <label>Пошта
            <input name="b2" type="email" placeholder="[email protected]"></label>
        <label>Вік від 18 до 120
            <input name="b3" type="number" min="18" max="120" placeholder="30"></label>
        <p class="verdict">Порожні поля нейтральні. Введіть у пошту слово без
            равлика й перейдіть далі — рамка почервоніє саме тоді.</p>
    </form>
</div>

<h4 class="cap">Що <code>:valid</code> НЕ ловить</h4>
<form class="card edge">
    <label>Поле без жодного обмеження — зелене завжди
        <input name="c1"></label>
    <label>Вимкнене обов'язкове поле — ні зелене, ні червоне
        <input name="c2" required disabled></label>
    <label>Лише для читання — теж поза перевіркою
        <input name="c3" type="email" value="це не пошта" readonly></label>
    <label>maxlength=3, а значення з розмітки довше — усе одно валідне
        <input name="c4" maxlength="3" value="абвгде"></label>
    <label>step=2, значення 3: межі цілі, крок порушено
        <input name="c5" type="number" min="0" max="10" step="2" value="3"></label>
</form>

CSS

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.card {
    flex: 1 1 280px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

.card h4 {
    margin: 14px 0 10px;
}

label {
    display: block;
    margin: 12px 0;
    color: #5a6472;
    font-size: .9em;
}

input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    font-size: 1rem;
}

/* ліва форма: стан читається з першої мілісекунди */
.naive input:invalid {
    border-color: #d64545;
    background: #fdeeee;
}

.naive input:valid {
    border-color: #3a9a4f;
    background: #edf9ef;
}

/* права форма: чекаємо, доки людина справді попрацює з полем */
.polite input:user-invalid {
    border-color: #d64545;
    background: #fdeeee;
}

.polite input:valid:not(:placeholder-shown) {
    border-color: #3a9a4f;
    background: #edf9ef;
}

/* нижній блок: підсвічуємо всі три можливі стани */
.edge input:valid {
    border-color: #3a9a4f;
}

.edge input:invalid {
    border-color: #d64545;
}

.verdict {
    margin: 14px 0 0;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    color: #5a6472;
    font-size: .85em;
}

.cap {
    margin: 26px 0 8px;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

HTML

<input type="email" value="[email protected]">
<input type="email" value="не-адреса">

CSS

input:valid {
    background-color: yellow;
}