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

:valid

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

Синтаксис

:valid {
}

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

Примеры

Пример 1

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

<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

См. также

Ссылки