:invalid
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Описание
CSS псевдокласс :invalid находит любые <input> или <form> элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.
По умолчанию, Gecko не применяет стили к псевдоклассу :invalid. Однако, применяет стили (красное "свечение", используя свойство box-shadow) к псевдоклассу :-moz-ui-invalid, который применяется в подгруппе случаев для :invalid.
Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.
:invalid { box-shadow: none; } :-moz-submit-invalid { box-shadow: none; } :-moz-ui-invalid { box-shadow: none; } Замечания
Радиокнопки
Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом name) имеет атрибут required, псевдокласс :invalid применяется ко всем из них, если ни одна из кнопок группы не выбрана.
Пример
Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
HTML
<form> <label>Введите URL:</label> <input type="url" /> <br /> <br /> <label>Введите эл. почту:</label> <input type="email" required /> </form> CSS
input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } Спецификации
| Specification |
|---|
| HTML # selector-invalid |
| Selectors Level 4 # invalid-pseudo |
Совместимость с браузерами
Смотрите также
- Прочие псевдоклассы для валидации:
:required,:optional,:valid - Псевдоклассы Mozilla:
:user-invalid,:-moz-submit-invalid - Валидация форм
- Получение состояния валидации средствами JavaScript