CSS :invalid-Pseudoklasse

Die CSS :invalid-Pseudoklasse wählt formbezogene Steuerelemente (wie <input>, <select> und <textarea>) aus, deren Wert gemäß ihren Einstellungen ungültig ist.

Der :invalid-Selektor gilt für Formularelemente mit Validierungsbeschränkungen, z. B. <input>-Felder mit min- und max-Attributen (für die Typen number, range und date), E-Mail-Felder ohne eine gültige E-Mail-Adresse, Zahlenfelder ohne einen numerischen Wert oder erforderliche Felder mit einem leeren Wert.

Hinweise

Radiobuttons

Wenn mindestens einer der Radiobuttons in einer Gruppe erforderlich ist, wird der :invalid-Selektor auf alle angewendet (falls keiner der Buttons in der Gruppe ausgewählt ist). Gruppierte Radiobuttons besitzen denselben Wert für ihr name-Attribut.

Gecko-Standardwerte

Standardmäßig wendet Gecko keinen Stil auf die :invalid-Pseudoklasse an (wir können jedoch mit der Eigenschaft box-shadow einen roten „Glow“ hinzufügen), wendet aber einen Stil auf die Pseudoklasse :-moz-ui-invalid an, die in einer Teilmenge der Fälle für die :invalid-Pseudoklasse gilt.

Ergänzende Pseudoklasse

Zum Vergleich: Die :valid-Pseudoklasse wählt Formularsteuerelemente aus, die ihre Validierungsbeschränkungen erfüllen.

Version

Selectors Level 4

Syntax

CSS :invalid-Syntaxcode

css

:invalid {
  css declarations;
}

Beispiel für den :invalid-Selektor:

CSS :invalid-Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:invalid {
        border: 2px solid #ff0000;
      }
    </style>
  </head>
  <body>
    <h2>:invalid selector example</h2>
    <form>
      <input type="email" value="invalid-email" required />
    </form>
  </body>
</html>

Try it Yourself »

Praxis

Welche Funktion hat die ':invalid'-Pseudoklasse in CSS?

Sie dient dazu, jedes ungültige Element in einem Formular auszuwählen und zu stylen.Sie wird zur Fehlerbehandlung in JavaScript verwendet.Sie dient dazu, jedes gültige Element in einem Formular auszuwählen und zu stylen.Sie hilft dabei, die Formularelemente zu validieren, bevor sie an einen Server gesendet werden.Sie dient dazu, den Körper der HTML-Seite zu stylen.

CSS :invalid-Pseudoklasse ​

Hinweise ​

Radiobuttons ​

Gecko-Standardwerte ​

Ergänzende Pseudoklasse ​

Version ​

Syntax ​

Beispiel für den :invalid-Selektor: ​

Praxis ​