:user-invalid

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:

<form>
  <label for="quantity">
    Quantity:
    <input id='quantity' type="number" min="0" max="10" value="11">
  </label> 
  <!-- Rest of the form... -->
</form>

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 difference between a valid value (left) and an invalid value entered by a user after interacting with the form.

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;
}
The difference between :invalid (center) and an invalid value entered by a user (right) can be tough to distinguish

Using 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 -mox-ui-invalid that adopts similar standards.

Related

More Information

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag