CSS :invalid Pseudo-Klasse

Definition und Verwendung

CSS :invalid Pseudo-Klassen werden verwendet, um die Stile für ungültige Formularelemente zu setzen.

Beachten Sie:Dieser Pseudo-Klasse ist nur für Formularelemente mit Einschränkungen zugewiesen, wie z.B. Eingabelemente mit den Attributen min und max, E-Mail-Felder ohne gültige E-Mail-Adresse oder Numerikfelder ohne数值等。

Beachten Sie:Falls eines der Radio-Button-Gruppenoptionen obligatorisch ist und keine der Radio-Button-Optionen in der Gruppe ausgewählt ist, wird dieser Pseudo-Klasse auf alle Radio-Button angewendet.

Hinweis:Verwenden Sie :valid Pseudo-Klassen stellen die Stile für gültige Formularelemente ein.

Beispiel

Stellen Sie die Stile für die ungültigen <fieldset> und <input>-Elemente ein:

fieldset:invalid {
  border: 2px solide rot;
  background-color: beige;
}
input:invalid {
  border: 2px solide rot;
  background-color: beige;
}

Probieren Sie es selbst aus

CSS-Syntax

:invalid {
  css-Anweisungen;
}

Technische Details

Version: CSS4

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die den Pseudo-klasse vollständig unterstützt.

Chrome Edge Firefox Safari Opera
10 12 4 5 10

Verwandte Seiten

Referenz:CSS :valid Selektor