: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.
The :user-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, after the user has interacted with it.
The :user-invalid pseudo-class must match an :invalid, :out-of-range, or blank-but :required element between the time the user has attempted to submit the form and before the user has interacted again with the form element.
Syntax
css
:user-invalid { /* ... */ } Examples
Setting a color and symbol on :user-invalid
In the following example, the red border and ❌ only display once the user has interacted with the field. Try typing something other than an email address to see it in action.
html
<form> <label for="email">Email *: </label> <input id="email" name="email" type="email" required /> <span></span> </form> css
input:user-invalid { border: 2px solid red; } input:user-invalid + span::before { content: "✖"; color: red; } Specifications
| Specification |
|---|
| HTML # selector-user-invalid |
| Selectors Level 4 # user-invalid-pseudo |