Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

Form validation styling has always been tricky to get right. The new :user-valid and :user-invalid pseudo-classes fix a long-standing frustration with CSS form validation - showing error states too early.

Unlike their predecessors :valid and :invalid, these new selectors wait for meaningful user interaction before applying styles. This seemingly small difference leads to a significantly better user experience: no more fields marked as invalid before users even start typing.

With traditional validation, this input would show an error state immediately because it’s empty and required. The new :user-valid and :user-invalid selectors only apply styles after meaningful interaction.

Forms now start neutral and validate naturally as people use them. No more angry red borders on page load - just clean, helpful feedback when it makes sense.

Fallbacks and Browser Support

Browser support for these new selectors is still rolling out, but that’s okay. Modern browsers get the improved behavior while older ones fall back to traditional validation - no JavaScript needed either way.

These pseudo-classes are nice, but what about browsers that don’t support them yet? There’s no built-in fallback - older browsers will simply ignore these selectors. This means users on those browsers won’t see any validation styles at all.

For now, the safest approach is to use @supports to provide a fallback for browsers that don’t support :user-valid and :user-invalid. This way, you can ensure that all users see some form of validation styling.

These small improvements in form validation show how CSS continues to evolve in the right direction.