:valid

Содержание

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

Синтаксис

input:valid { ... }

Пример

<!DOCTYPE html>
<html>
 <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

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Возможная рекомендация
Selectors Level 4Рабочий проект
CSS Basic User Interface Module Level 3Рабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1010101.34
AndroidFirefox MobileOpera MobileSafari Mobile
2.14105




Рекомендую хостинг: beget.ru

Сервер падал:53 дн. 23:10 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru