Псевдоклас valid

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

Синтаксис

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

Пример

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

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

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

Результат:

Вижте също