Псевдокласс :valid

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

Синтаксис

Селектор:valid { … }

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>:valid</title>
  <style>
   input:invalid {
    background: #fdd; /* Красный цвет фона */
   }
   input:valid {
    background: #dfd; /* Зелёный цвет фона */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p>Адрес сайта</p>
   <p><input type="url" required></p>
   <p>Адрес электронной почты</p>
   <p><input type="email" required></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере корректно заполненные поля формы обозначаются зелёным фоном, а некорректные красным. Результат примера показан на рис. 1.

Использование псевдокласса :valid

Рис. 1. Использование псевдокласса :valid

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

Selectors Level 4

Браузеры

10 12 10 10 1.3 4
2.1 4 10 5
Псевдоклассы Формы