CSS селектор :user-invalid — помилка форми в потрібний момент

CSS псевдоклас :user-invalid вибирає невалідне поле після взаємодії з користувачем — і не лякає його червоним до початку введення.

правити

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

Це пара до :user-valid і, мабуть, найкорисніший із двох. Форма з обов'язковими полями більше не світиться червоним одразу після відкриття: помилка з'явиться тоді, коли її справді припустилися.

правити

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

Синтаксис

:user-invalid

Переглядачі

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

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

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

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

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

Приклади

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

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

input:user-invalid {
    border-color: #c62828;
    background: #fff5f5;
}