CSS/Selektoren/invalid

Browserunterstützung
caniuse.com

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

Syntax

:invalid

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

• HTML/Elemente/input
• Formulare
  • Formulare/browsereigene Validierung,
    dort insbesondere Valide Eingaben mit CSS sichtbar machen
  • Formulare/Eingaben mit JavaScript validieren
• :user-invalid
  validiert erst, wenn Nutzer eine Eingabe gemacht hat.

Weblinks

• W3C: The Validity Pseudo-classes: :valid and :invalid
• MDN: :invalid
• Browser-Support: caniuse.com