Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Ü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 AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome 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 ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10Safari iOS Vollständige Unterstützung 5Samsung Internet Android ?
Applies to <form> elementsChrome Vollständige Unterstützung JaEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 13IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari ? WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, forrestkirby
Zuletzt aktualisiert von: SJW,