:user-invalid
Baseline 2023
Newly available
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.
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.
<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;
}
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.