Описание

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;}

Спецификации

Совместимость с браузерами

Смотрите также

• Прочие псевдоклассы для валидации::required,:optional,:valid
• Псевдоклассы Mozilla::user-invalid,:-moz-submit-invalid
• Валидация форм
• Получениесостояния валидации средствами JavaScript