We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.
Vorgeschlagene Empfehlung Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Merkmal Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Grundlegende Unterstützung (<input>) 10.0 (Ja) 4.0 (2) 10 10.0 5.0
Anwendung auf <form> ? ? 13 (13) ? ? ?
Merkmal Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Grundlegende Unterstützung ? (Ja) 4.0 (2) Nicht unterstützt 10.0 5.0
Anwendung auf <form> ? ? 13.0 (13) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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