CSS/Selektoren/invalid

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

Syntax	:invalid
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ürde 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
• HTML/Tutorials/Formulare/input
• HTML/Tutorials/Formulare/browsereigene Validierung, dort insbesondere required und pattern
• JavaScript/Tutorials/Formulare/Eingaben mit JavaScript validieren

Weblinks

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