Pseudo-klassen valid

Pseudo-klassen valid sätter stilen för inputfält där korrekt värde har angetts eller värde som motsvarar angiven typ.

Syntax

cssselektor:valid {
  
}

Exempel

Låt oss ändra bakgrundsfärgen på inputfältet till rosa när ett ogiltigt värde anges och tillbaka till grön när värdet har klarat valideringen för den valda typen:

html<p>Ange din e-post</p>
<p><input type="email"></p>

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

Результат:

Se även

pseudo-klassen :invalid,
som sätter stilen för inputfält där ogiltigt värde har angetts
pseudo-klassen :out-of-range,
som sätter stilen för element vars värden ligger utanför intervallet
pseudo-klassen :in-range,
som sätter stilen för element med angivet värdeintervall