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

Псевдокласс invalid задает стиль для инпута, в который ввели неправильное значение или значение не соответствующее указанному типу.

Синтаксис

селектор:invalid {

}

Пример

Давайте перекрасим фон инпута в розовый цвет, когда вводится неправильное значение и обратно в зеленый цвет, когда значение прошло проверку на соответствие выбранного типа:

<p>Enter Your email</p>
<p><input type="email"></p>

input:invalid {
	background: #E37D76;
}
input:valid {
	background: #9DDFA4;
}

Смотрите также

псевдокласс :valid,
который задает стиль инпуту, который ввели правильное значение
псевдокласс :default,
который задает стиль элементам по умолчанию
псевдокласс :in-range,
который задает стиль элементам с заданным диапазоном значений
псевдокласс :out-of-range,
который задает стиль элементам, значения которых выходит за рамки диапазона