Псевдоклас invalid

Псевдокласът invalid задава стил за инпут, в който е въведена неправилна стойност или стойност, която не отговаря на посочения тип.

Синтаксис

селектор:invalid {

}

Пример

Нека пребоядираме фона на инпут в розов цвят, когато се въведе неправилна стойност и обратно в зелен цвят, когато стойността е преминала проверка за съответствие с избрания тип:

<p>Въведете вашия имейл</p>
<p><input type="email"></p>

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

Вижте също

псевдоклас :valid,
който задава стил на инпут, в който е въведена правилна стойност
псевдоклас :default,
който задава стил на елементите по подразбиране
псевдоклас :in-range,
който задава стил на елементи с зададен диапазон от стойности
псевдоклас :out-of-range,
който задава стил на елементи, чиито стойности излизат извън диапазона