: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 den Validierungsbeschränkungen nicht gültig ist, nachdem der Benutzer damit interagiert hat.
Die :user-invalid Pseudoklasse muss ein :invalid, :out-of-range oder leeres, aber :required Element zwischen der Zeit, in der der Benutzer versucht hat, das Formular abzusenden, und bevor der Benutzer erneut mit dem Formularelement interagiert hat, übereinstimmen.
Syntax
:user-invalid { /* ... */ } Beispiele
Eine Farbe und ein Symbol auf :user-invalid setzen
Im folgenden Beispiel werden der rote Rahmen 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 |
Browser-Kompatibilität
Loading…