:user-invalid
Matches input elements after the user has modified them and they are invalid. Shows validation errors to users.
Quick example
input:user-invalid { border-color: red; }
input:user-invalid::after { content: "✗"; }Examples
Show error state after user interaction
input:user-invalid {
border-color: red;
background-color: #ffebee;
}
/* Red border only after user tries to submit */Style invalid inputs only after the user has interacted, avoiding red errors on fresh forms.
Combine with validation feedback
.email-field:user-invalid::after {
content: "Invalid email";
color: red;
font-size: 0.9em;
}Show validation messages only after user interaction, not on page load.
:user-invalid Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.
Safe to use without fallbacks.
Common pitfalls
A field is :user-invalid only after the user has changed it. On page load, invalid fields don't match :user-invalid. Use :invalid to style all invalid inputs.
:invalid matches all invalid inputs; :user-invalid only matches those the user has touched. Choose based on UX: avoid red on load, but do show errors after user edits.