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

Псевдокласс 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,
который задает стиль элементам с заданным диапазоном значений