: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
Limited availability 65% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
Common pitfalls
:user-invalid requires user interaction
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.
Different from :invalid
: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.