:user-invalid
Baseline 2023Newly 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 steht für jedes validierte Formularelement, dessen Wert basierend auf den Validierungsbeschränkungen ungültig ist, nachdem der Benutzer damit interagiert hat.
Die :user-invalid
-Pseudoklasse muss mit einem :invalid
, :out-of-range
oder leerem, aber :required
-Element übereinstimmen, und zwar zwischen dem Zeitpunkt, zu dem der Benutzer versucht hat, das Formular abzusenden, und bevor der Benutzer erneut mit dem Formularelement interagiert.
Syntax
:user-invalid {
/* ... */
}
Beispiele
Festlegen einer Farbe und eines Symbols für :user-invalid
Im folgenden Beispiel werden der rote Rand und das ❌ erst angezeigt, nachdem der Benutzer mit dem Feld interagiert hat. Versuchen Sie, etwas anderes als eine E-Mail-Adresse einzugeben, um das Ergebnis 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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:user-invalid |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Uses a non-standard name.
- Has more compatibility info.