Справочник HTML & CSS

:user-invalid

Срабатывает у ошибочного поля только после того, как пользователь с ним поработал; `:user-valid` — наоборот.

Синтаксис

input:user-invalid { … }

Примеры

Поле краснеет, только когда вы уходите из него с неверным значением:

<style>
  input:user-invalid { border: 2px solid crimson; background: mistyrose; }
  input:user-valid { border: 2px solid seagreen; }
</style>
 
<p>Type something wrong, then click outside the field:</p>
<input type="email" placeholder="Email" required>

Примечания

Поддерживается всеми актуальными браузерами с 2023 года. В старых правило просто игнорируется, и форма продолжает работать.

См. также

:valid — `:valid` срабатывает у поля, значение которого проходит встроенные проверки, `:invalid` — у поля, которое их не проходит.
:required — Срабатывает у полей с атрибутом `required`; `:optional` — у полей без него.

Вопросы и ответы по теме

В учебнике

Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.

Спасибо, что читаете!