CSS псевдокласс :valid

Псевдокласс :valid выбирает элементы <form> со значением, которое проходит проверку в браузере на соответствие параметров элемента.

Селектор :valid работает только для элементов <input> с атрибутами min и max, для type="number", значение которого число, а не буквы, для type="email" с корректным адресом электронной почты.

Версия

CSS3

Синтаксис

:valid {
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      input{
      border:1px solid #cccccc;
      padding:5px 10px;
      }
      input:valid {
      background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :valid</h2>
    <form>
      <input type="email" value="[email protected]">
    </form>
  </body>
</html>

В данном примере при вводе неправильного электронного адреса стиль не применяется.

Поддержка браузера

chrome edge firefox safari opera
10.0+ 12.0+ 4.0+ 10.1+ 10.0+

Практикуйте свои знания

What is the function of the :valid pseudoclass in CSS?
Считаете ли это полезным?