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

Справочник:

Псевдокласс

Характеристики свойства

В каких браузерах работает?


-	8.0+	9.5+	5.0+	4.0+	2.1+	3.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	-	-	+

Для чего используется?

Псевдокласс дает возможность визуально выделить те поля формы, которые заполнены корректно. Для ясности стоит отметить, что корректным является то поле, содержимое которого соответствует или не противоречит значению атрибута type. Такая схема поможет пользователю разобраться, какие поля он заполнил верно, а какие нужно исправить.

Как правильно задавать?

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

Какие могут быть значения?

Нет.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>valid</title>
  <style>
   #form .feild:focus {
     background: #c3c3c3;
   }
   .feild:valid {
    background: #a7ffb5;
   }
   .form-item {
     margin-bottom:10px;
   }
   .label {
     width:80px;
	 display:block;
   }
  </style>
 </head>
 <body>
  <form method="post" id="form">
   <div class="form-item">
     <span class="label">Логин:</span>
     <input type="text" class="feild" required>
   </div>
   <div class="form-item">
     <span class="label">Пароль:</span>
     <input type="pasword" class="feild" required>
   </div>
   <p><input type="submit" value="Войти" /></p>
  </form>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

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