:invalidСелектор позволяет выбрать элементы , которые не содержат действительное содержание, как определено его typeатрибутом. :invalidопределен в спецификации CSS Selectors Level 3 как «псевдоселектор достоверности», то есть он используется для стилизации интерактивных элементов на основе оценки пользовательского ввода.
Этот селектор имеет одно конкретное назначение: предоставление пользователю обратной связи, когда он взаимодействует с формой на странице. В приведенном ниже примере используется CSS, чтобы сделать поля «Электронная почта» красными или зелеными, в зависимости от того, соответствует ли содержимое действительному шаблону адреса электронной почты:
Обратите внимание на то, что первый («Электронная почта») имеет зеленый цвет, даже если в поле нет содержимого. Это связано с тем, что ввод не является обязательным, поэтому оставление его пустым приведет к отправке действительной формы. Чтобы исправить это поведение, у второго есть атрибут «required», что означает, что пустое поле приведет к недопустимой отправке формы.
Точки интереса
:invalidмогут быть «связаны» с другими псевдоселекторами: например,:focusдля проверки только того момента, когда пользователь вводит текст,:beforeили:afterдля создания значков или текста, чтобы обеспечить дополнительную обратную связь с пользователем, или для селекторов атрибутов, например,input(value="")для проверки только полей ввода, содержащих контент.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 10.0+ | 5.0+ | 4.0+ | 10.0+ | 10+ | Неа | Неа |
:invalidбыл представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров его не поддерживают. Однако поддержка современных браузеров становится лучше. Если вам требуется поддержка старых версий браузеров, используйте полифил или используйте эти селекторы некритично, например, с прогрессивным улучшением, что рекомендуется.