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

:valid

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

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

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

Синтаксис

1
2
3
:valid {
  /* ... */
}

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

Пример

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

1
2
3
4
5
6
7
8
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите адрес эл. почты:</label>
  <input type="email" required />
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
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 (рус.)

Комментарии