:valid¶

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

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

Синтаксис¶

1
2
3

:valid {
  /* ... */
}

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

• HTML Living Standard
• HTML5
• Selectors Level 4
• CSS Basic User Interface Module Level 3

Пример¶

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

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

См. также¶

• :invalid
• :required
• :optional

Ссылки¶

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

Комментарии