:invalid

Übersicht

Die Pseudoklasse :invalid entspricht jedem <input>- oder <form>-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements validiert werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.

Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft box-shadow) auf die Pseudoklasse :-moz-ui-invalid an, der einen Teil der Fälle für :invalid betrifft.

Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

Syntax

:invalid

Anmerkungen

Radio Buttons

Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr name-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft required hat, wird die Pseudoklasse :invalid auf alle Radio Buttons der Gruppe angewendet.

Beispiel

Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.

HTML

<form>
  <label for="url_input">Geben Sie eine URL ein:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Geben Sie eine E-Mail-Adresse ein:</label>
  <input type="email" id="email_input" required/>
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von ':invalid' in dieser Spezifikation.
Lebender Standard Keine Änderung.
HTML5
Die Definition von ':invalid' in dieser Spezifikation.
Empfehlung Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.
Selectors Level 4
Die Definition von ':invalid' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung.
CSS Basic User Interface Module Level 3
Die Definition von ':invalid' in dieser Spezifikation.
Empfehlung Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.

Browser-Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
:invalidChrome Vollständige Unterstützung 10Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 4IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 10Safari Vollständige Unterstützung 5WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 5Samsung Internet Android Vollständige Unterstützung 1.0
Applies to <form> elementsChrome Vollständige Unterstützung 40Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 13IE Keine Unterstützung NeinOpera Vollständige Unterstützung 27Safari Vollständige Unterstützung 9WebView Android Vollständige Unterstützung 40Chrome Android Vollständige Unterstützung 40Firefox Android Vollständige Unterstützung 14Opera Android Vollständige Unterstützung 27Safari iOS Vollständige Unterstützung 9Samsung Internet Android Vollständige Unterstützung 4.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung

Siehe auch