: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 |
Совместимость с браузерами
Loading…
Смотрите также
- Прочие псевдоклассы для валидации:
:required,:optional,:valid - Псевдоклассы Mozilla:
:user-invalid,:-moz-submit-invalid - Валидация форм
- Получение состояния валидации средствами JavaScript