The :user-valid pseudo-class
Published on
The :user-valid
pseudo-class is a newer version of :valid
that makes form validation way more user-friendly.
It only kicks in after the user has interacted with an input (like typing or selecting something) and their input meets all the validation requirements.
Here’s a quick example:
input:user-valid {
border: 2px solid green;
background: #f0fff0;
}
This is great because, unlike the :valid
pseudo-class, :user-valid
won’t show validation styles right when the page loads.
The user has to interact with that field first, so no more annoying green or red borders on required fields.
This is a baseline feature—meaning it’s supported by all the major browser engines—but you still might want to check how wide the support is before using it production, and you might want to have a fallback plan for older browsers.
Dive deeper
If you’d like to see it in action, as well as fallback solution you can use, you can check out this short video.