:valid
`:valid` срабатывает у поля, значение которого проходит встроенные проверки, `:invalid` — у поля, которое их не проходит.
Синтаксис
input:valid { … } input:invalid { … }Примеры
Правильный и неправильный email:
<style>
input:valid { border: 2px solid seagreen; }
input:invalid { border: 2px solid crimson; }
</style>
<input type="email" value="anna@example.com">
<input type="email" value="not an email">Примечания
:invalid действует сразу, поэтому пустое обязательное поле красное ещё до того, как пользователь что-то ввёл. Чтобы показывать ошибки только после того, как с полем поработали, берите :user-invalid.
См. также
- :user-invalid — Срабатывает у ошибочного поля только после того, как пользователь с ним поработал; `:user-valid` — наоборот.
- :required — Срабатывает у полей с атрибутом `required`; `:optional` — у полей без него.
Вопросы и ответы по теме
В учебнике
- Оформление форм — Как оформить поля и кнопки — отступы и рамки, состояние фокуса, подсказка, выключенные и ошибочные поля, accent-color и свои флажки через appearance: none.