Псевдоклас invalid

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

Синтаксис

cssселектор:invalid {

}

Пример

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

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

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

Результат:

Вижте също