Learn Development at Frontend Masters
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.
