CSS/Selektoren/valid

Der :valid-Selektor kennzeichnet Formularelemente danach, ob eine Eingabe valide (gültig, zulässig) ist.

Syntax	:valid
Parameter	{{{Parameter}}}}}
Browsersupport	Details: caniuse.com

Beispiel

input:valid {
      color: green;
}
input:invalid {
      background-color: #e00;
}

Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von rot auf transparent und die Textfarbe auf grün, sobald etwas eingegeben wurde.
(Nutzer mit Rot-Grün-Sehschwäche würden bei einer Änderung der Hintergrundfarbe von Grün auf Rot keine Änderung erkennen, deshalb die Kennzeichnung durch zwei Merkmale.)

Siehe auch

• CSS/Tutorials/Selektoren/Pseudoklasse
• Formulare
• Formulare/browsereigene Validierung, dort insbesondere required und pattern
• Formulare/Eingaben mit JavaScript validieren

Weblinks

• W3C: The Validity Pseudo-classes: :valid and :invalid
• MDN: :valid