Псевдоклассы CSS3 для проверки полей - valid и invalid.
Всем привет. В этой небольшой статье я расскажу про простые, но удобные псевдоклассы CSS3 - valid и invalid.
Итак, как понятно из названия, служат они для того, чтобы стилизовать те поля, которые заполнены верно и неверно. Мы уже рассматривали с вами все типы полей формы в CSS3.
Давайте создадим несколько.
<input type="url">
<input type="email">
<input type="number" min="5" max="100" value="10" step="2">
Теперь применим только что изученный псевдокласс invalid
input:invalid {
border: 1px solid red;
color: red;
background: #ccc;
}
Теперь данный стиль применится ко всем полям формы, которые заданы неверно.
А чтобы задать стиль для элементов, которые заданы верно, - используйте псевдокласс valid.
input:valid {
color: green;
border: 1px solid green;
background: white;
}
Итак, на этом все. Спасибо за внимание!
-
Создано 24.06.2014 20:39:23
-
Михаил Русаков
Комментарии (3):
Здравствуй те, у меня такой вопрос, А как он проверяет, какое поле valid, а какое invalid?
Ответить
Почитайте эту статью: http://myrusakov.ru/new-type-values-html5.html Браузер, в зависимости от типа поля, проверят то или иное значение. Например, поле с типом email должно содержать email. Если там что-то другое, то оно invalid.
Ответить
Проверяя на валидность, валидатор выдаёт такие ошибки: Неизвестный псевдоэлемент или псевдокласс :invalid Неизвестный псевдоэлемент или псевдокласс :valid Как это исправить?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.