Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

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

Дата:8.12.15 в 14:24
Справочник: 

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

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

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

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

valid

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: