MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Описание

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

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

Спецификация Статус Комментарий
WHATWG HTML Living Standard
Определение ':invalid' в этой спецификации.
Живой стандарт Без изменений.
HTML5
Определение ':invalid' в этой спецификации.
Рекомендация Определяет семантику в HTML и ограничения проверки.
Selectors Level 4
Определение ':invalid' в этой спецификации.
Рабочий черновик Без изменений.
CSS Basic User Interface Module Level 3
Определение ':invalid' в этой спецификации.
Кандидат в рекомендации Определяет псевдо-класс, но не семантику.

Поддержка браузерами

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (<input>) 10.0 4.0 (2) 10 10.0 5.0
Применяется к <form> ? 13 (13) ? ? ?
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? 4.0 (2) Нет 10.0 5.0
Применяется к <form> ? 13.0 (13) ? ? ?

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

Метки документа и участники

 Внесли вклад в эту страницу: BychekRU
 Обновлялась последний раз: BychekRU,