Псевдокласс valid - стиль для инпутов, в которых ввели правильное значение в CSS
Псевдокласс valid задает стиль
для инпутов, в которых ввели правильное
значение или значение соответствующее указанному
типу.
Синтаксис
селектор:valid {
}
Пример
Давайте перекрасим фон инпута в розовый цвет, когда вводится неправильное значение и обратно в зеленый цвет, когда значение прошло проверку на соответствие выбранного типа:
<p>Enter Your email</p>
<p><input type="email"></p>
input:invalid {
background: #E37D76;
}
input:valid {
background: #9DDFA4;
}
:
Смотрите также
-
псевдокласс
:invalid,
который задает стиль инпуту, в который ввели неправильное значение -
псевдокласс
:out-of-range,
который задает стиль элементам, значения которых выходит за рамки диапазона -
псевдокласс
:in-range,
который задает стиль элементам с заданным диапазоном значений