Псевдоклас valid

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

Синтаксис

селектор:valid {
	
}

Пример

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

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

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

Вижте също

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