Всем привет. В этой небольшой статье я расскажу про простые, но удобные псевдоклассы 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;
}
Итак, на этом все. Спасибо за внимание!
