Pseudo-klassen invalid

Pseudo-klassen invalid setter stil for et inndatafelt der det er skrevet inn en ugyldig verdi eller en verdi som ikke samsvarer med den angitte typen.

Syntaks

cssvelger:invalid {

}

Eksempel

La oss endre bakgrunnsfargen på inndatafeltet til rosa når en ugyldig verdi skrives inn, og tilbake til grønn når verdien har bestått valideringen for den valgte typen:

html<p>Skriv inn e-postadressen din</p>
<p><input type="email"></p>

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

Результат:

Se også

pseudo-klassen :valid,
som setter stil for et inndatafelt med gyldig verdi
pseudo-klassen :default,
som setter stil for standardelementer
pseudo-klassen :in-range,
som setter stil for elementer med et spesifisert verdiområde
pseudo-klassen :out-of-range,
som setter stil for elementer hvis verdier faller utenfor området