:user-invalid CSS Pseudoklasse
Baseline
2023
Neu verfügbar
Seit November 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die :user-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert basierend auf den Validierungsanforderungen ungültig ist, nachdem der Benutzer damit interagiert hat.
Die :user-invalid Pseudoklasse muss mit einem :invalid, :out-of-range, oder einem leeren, aber :required Element übereinstimmen, zwischen dem Zeitpunkt, an dem der Benutzer versucht hat, das Formular abzuschicken, und bevor der Benutzer erneut mit dem Formularelement interagiert hat.
Syntax
:user-invalid {
/* ... */
}
Beispiele
Eine Farbe und ein Symbol bei :user-invalid festlegen
Im folgenden Beispiel werden der rote Rand und ❌ erst angezeigt, nachdem der Benutzer mit dem Feld interagiert hat. Versuchen Sie, etwas anderes als eine E-Mail-Adresse einzugeben, um es in Aktion zu sehen.
<form>
<label for="email">Email *: </label>
<input id="email" name="email" type="email" required />
<span></span>
</form>
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: "✖";
color: red;
}
Spezifikationen
| Spezifikation |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |