HTML & CSS Tip of the Week

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.