Pseudoklasa invalid

Pseudoklasa invalid ustawia styl dla inputa, do którego wprowadzono nieprawidłową wartość lub wartość nieodpowiadającą określonemu typowi.

Składnia

cssselektor:invalid {

}

Przykład

Zmieńmy kolor tła inputa na różowy, gdy wprowadzana jest nieprawidłowa wartość i z powrotem na zielony, gdy wartość przeszła weryfikację zgodności z wybranym typem:

html<p>Wprowadź swój email</p>
<p><input type="email"></p>

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

Результат:

Zobacz też