We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Описание

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

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

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность 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,