:invalid

Описание

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