:user-valid
Matches input elements after the user has modified them and they are valid. Provides user-driven validation feedback.
Quick example
input:user-valid { border-color: green; }
input:user-valid::after { content: "✓"; }Examples
Show confirmation after user fills valid input
input:user-valid {
border-color: green;
background-image: url('check.svg');
background-position: right;
}
/* Green check only after user enters valid data */Provide positive feedback when users fill in form fields correctly.
Unlock submit button when form is valid
button[type="submit"]:enabled:user-valid {
opacity: 1;
}
button[type="submit"]:not(:user-valid) {
opacity: 0.5;
}Show visual hint when form is ready to submit (requires JavaScript logic alongside).
:user-valid 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-valid only for user-touched fields
A field is :user-valid only if the user has interacted and it's now valid. Pristine, empty fields don't match :user-valid even if they're optional.
Don't rely on CSS alone for validation
:user-valid shows visual feedback but doesn't prevent form submission. Always validate on the backend.