:user-invalid CSS Pseudo Class

The :user-invalid pseudo-class represents a form control that the user has interacted with and whose current value does not satisfy its validation constraints. Unlike automatic validation states, this pseudo-class only becomes active after user interaction* making it ideal for showing validation feedback without immediately flagging untouched fields.

This pseudo-class is part of the user interaction–aware validation states introduced to improve usability and accessibility in modern forms.

How :user-invalid Works

The :user-invalid pseudo-class applies when all of the following are true:

1. The element is a form control (such as an input, textarea, or select).

2. The user has interacted with the element (for example, typed into it or blurred it).

3. The value fails validation, such as:

   • Violating required
   • Failing a pattern
   • Being outside min / max
   • Not matching a required type like email

This makes it different from :invalid, which applies immediately, even before user interaction.

Why Use :user-invalid?

Using :user-invalid improves user experience by:

• Preventing error styles from appearing on page load
• Showing feedback only after the user interacts
• Making validation feel less aggressive and more intuitive

It is especially useful for modern forms that guide users gently rather than confronting them immediately.

Basic Example

<form>
  <label>
    Email:
    <input type="email" required>
  </label>
</form>

input:user-invalid {
  border: 2px solid red;
  background-color: #ffecec;
}

In this example, the red styling only appears after the user enters an invalid email and leaves the field.

Comparison with Related Pseudo-Classes

• :user-valid Applies when the user has interacted with the field and the value is valid.

• :invalid Applies immediately when the value is invalid - even before user interaction.

• :focus Applies when an element is currently focused and is often combined with validation styling.

Combining with Other Selectors

You can combine :user-invalid with attribute selectors or input types for more control:

input[type="email"]:user-invalid {
  border-color: red;
}

Or combine with focus styling:

input:user-invalid:focus {
  outline: 2px solid red;
}

Accessibility Considerations

While visual feedback is helpful, it’s best paired with accessible messaging:

• Use clear error text near the field
• Consider aria-invalid="true" for assistive technologies
• Avoid relying on color alone to convey errors