Pseudoluokka invalid

Pseudoluokka invalid asettaa tyylin syöttökentälle, johon on syötetty virheellinen arvo tai arvo, joka ei vastaa määritettyä tyyppiä.

Syntaksi

cssvalitsija:invalid {

}

Esimerkki

Muutetaan syöttökentän tausta vaaleanpunaseksi, kun siihen syötetään virheellinen arvo, ja takaisin vihreäksi, kun arvo läpäisee valitun tyypin mukaisen tarkistuksen:

html<p>Syötä sähköpostiosoitteesi</p>
<p><input type="email"></p>

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

Результат:

Katso myös