Take the pain out of building site search with the Algolia hosted API. Start free now!
The :user-invalid
is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects a form element based on whether the value—as entered by a user—is valid when checked against the what is specified as an accepted value in the HTML markup after the end user has interacted with the form beyond that input. In fact, :user-invalid
has been called “The User Interaction Pseudo-class” because it is unique in identifying a user action in selecting an element.
Take the following HTML markup for a basic form with a numeric field:
The numeric range set by the HTML markup for the input is between 1
and 10
but the default value has been set to 11
. That means the value is invalid as soon as the form loads.
However, the :user-invalid
pseudo-class will not take effect until after the user has actually interacted with the form beyond entering it in the field. That interaction is the difference between :user-invalid
and :invalid
. The same principle applies for entered form values that are set by :in-range
, :out-of-range
and :required
.
Once the value that the user has entered is determined to be an invalid entry, we can select the element:
input:user-invalid {
color: red;
}
The following image illustrates the different states between :valid
, and :user-invalid
based on the HTML example above.

The confusing thing with here is how closely related :invalid
and :user-invalid
are. If used together, it may be tough to distinguish the two:
input:invalid {
color: red;
}
input:user-invalid {
color: red;
}

:invalid
(center) and an invalid value entered by a user (right) can be tough to distinguishUsing one over the other or having distinct styling between the two might prove to be a better user experience in a real-life use case.
Browser Support
:user-invalid
is not currently supported but is proposed in the CSS Selectors Level 4 working draft.
Firefox uses a prefixed non-standard property -moz-ui-invalid
that adopts similar standards.