: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;
}
Спецификации
Specification |
---|
HTML Standard # selector-invalid |
Selectors Level 4 # validity-pseudos |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Прочие псевдоклассы для валидации:
:required
,:optional
,:valid
- Псевдоклассы Mozilla:
:user-invalid
,:-moz-submit-invalid
- Валидация форм
- Получение состояния валидации средствами JavaScript