Перейти к содержанию

:valid

Псевдокласс :valid применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.

Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

Псевдоклассы

Синтаксис

:valid {
  /* ... */
}

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

Пример

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

<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите адрес эл. почты:</label>
  <input type="email" required />
</form>
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;
}

:valid

См. также

Ссылки

  • Псевдо-класс :valid MDN (рус.)