CSS селектор :user-valid — валідація без передчасного зеленого

CSS псевдоклас :user-valid вибирає валідне поле, але лише після того, як користувач із ним попрацював.

правити

Загальний опис

Різниця зі старим :valid величезна. :valid спрацьовує одразу при завантаженні — і порожня форма спалахує зеленим ще до того, як людина щось ввела.

:user-valid мовчить, доки користувач не почав вводити чи не пішов із поля. Саме такої поведінки від валідації форми й очікують.

правити

Порада

Уживай :user-valid і :user-invalid замість :valid/:invalid скрізь, де показуєш стан полів кольором.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:user-valid

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
user-valid	119+	88+	16.5+	105+	119+	-

Підтримка: мобільні переглядачі

Переглядач
user-valid	119+	yes	yes	16.5+

Приклади

+ запропонувати свій приклад у пісочниці

<input type="email" required placeholder="[email protected]">

input:user-valid {
    border-color: #2e7d32;
}