Newly availableUseful when :user-valid and :user-invalid adds a clear capability without requiring fragile workarounds.
Selectors Newly available

:user-valid and :user-invalid

The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

Selectors

Overview

The :user-valid and :user-invalid pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:user-invalid
119
119
88
16.5
119
16.5
Other
css.selectors.user-valid

`:user-valid`
119
119
88
16.5
119
16.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: :-moz-ui-invalid (4)
Notes 1 item(s)
Implementation note
  • Previously available under a different name: :-moz-ui-valid (4)

Syntax

CSS 
input:user-valid {
  border-color: #16a34a;
  background-image: url('check.svg');
}

input:user-invalid {
  border-color: #dc2626;
  background-image: url('error.svg');
}

input:user-invalid + .error-message {
  display: block;
}

Live demo

Emailinput

:user-valid /:user-invalid Emailinput demo.

PreviewFullscreen

requiredtext

:user-valid /:user-invalid requiredtext demo.

PreviewFullscreen

Urlinput

:user-valid /:user-invalid URLinput demo.

PreviewFullscreen

Use cases

  • Browser-native behavior

    Use :user-valid and :user-invalid to rely on the platform for behavior that would otherwise require extra code or CSS complexity.

  • Progressive enhancement

    Enhance the experience where support exists while keeping a solid baseline elsewhere.

Cautions

  • Check browser support and actual product need before adding a new platform feature widely.
  • Keep feature usage understandable so future contributors know why it was chosen.

Accessibility

  • New platform features should still preserve readable defaults and robust interaction patterns.
  • Verify that enhancement paths do not leave unsupported environments with a broken experience.

Related links

Powered by web-features