:user-invalid
Baseline
2023
Newly available
Since â¨November 2023â©, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die :user-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert basierend auf ihren Validierungsbeschränkungen ungültig ist, nachdem der Benutzer damit interagiert hat.
Die :user-invalid Pseudoklasse muss mit einem :invalid, :out-of-range oder leeren, aber :required Element übereinstimmen, zwischen dem Zeitpunkt, an dem der Benutzer versucht hat, das Formular abzusenden, und bevor der Benutzer erneut mit dem Formularelement interagiert hat.
Syntax
:user-invalid {
/* ... */
}
Beispiele
Farbe und Symbol auf :user-invalid festlegen
Im folgenden Beispiel werden der rote Rand und â nur 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
| Specification |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |