1. Веб-технологии для разработчиков
  2. CSS: каскадные таблицы стилей
  3. Руководство по CSS
  4. Selectors
  5. :invalid

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

:invalid

Baseline
Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

Описание

CSS псевдокласс :invalid находит любые <input> или <form> элементы, контент которых не проходит валидацию, в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.

По умолчанию, Gecko не применяет стили к псевдоклассу :invalid. Однако, применяет стили (красное "свечение", используя свойство box-shadow) к псевдоклассу :-moz-ui-invalid, который применяется в подгруппе случаев для :invalid.

Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.

css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

Замечания

Радиокнопки

Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом name) имеет атрибут required, псевдокласс :invalid применяется ко всем из них, если ни одна из кнопок группы не выбрана.

Пример

Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.

HTML

html
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите эл. почту:</label>
  <input type="email" required />
</form>

CSS

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
# selector-invalid
Selectors Level 4
# invalid-pseudo

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

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

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content