: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

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!

Siehe auch

• :valid
• :-moz-submit-invalid
• :required
• :optional