Sie lesen die englische Version dieses Inhalts, da für dieses Gebietsschema noch keine Übersetzung vorhanden ist. Helfen Sie uns, diesen Artikel 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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:invalid | Chrome Vollständige Unterstützung 10 | Edge Vollständige Unterstützung 12 | Firefox Vollständige Unterstützung 4 | IE Vollständige Unterstützung 10 | Opera Vollständige Unterstützung 10 | Safari Vollständige Unterstützung 5 | WebView Android Vollständige Unterstützung 37 | Chrome Android Vollständige Unterstützung 18 | Firefox Android Vollständige Unterstützung 4 | Opera Android Vollständige Unterstützung 10.1 | Safari iOS Vollständige Unterstützung 5 | Samsung Internet Android Vollständige Unterstützung 1.0 |
Applies to <form> elements | Chrome Vollständige Unterstützung 40 | Edge Keine Unterstützung Nein | Firefox Vollständige Unterstützung 13 | IE Keine Unterstützung Nein | Opera Vollständige Unterstützung 27 | Safari Vollständige Unterstützung 9 | WebView Android Vollständige Unterstützung 40 | Chrome Android Vollständige Unterstützung 40 | Firefox Android Vollständige Unterstützung 14 | Opera Android Vollständige Unterstützung 27 | Safari iOS Vollständige Unterstützung 9 | Samsung Internet Android Vollständige Unterstützung 4.0 |
Legende
- Vollständige Unterstützung
- Vollständige Unterstützung
- Keine Unterstützung
- Keine Unterstützung