:user-valid CSS Pseudo Class

The :user-valid pseudo-class represents a form control element that the user has interacted with and whose current value successfully passes validation constraints. Unlike the standard validation pseudo-classes, this one only becomes active after the user has provided input, making it especially useful for user-friendly feedback that avoids showing validation states too early.

What :user-valid does

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

1. The element is a form control that supports validation (such as an input).
2. The user has interacted with the field (for example, typing or changing its value).
3. The value satisfies all validation rules (e.g., required, pattern, type, min, max).

This makes it different from :valid, which may apply before any user interaction, depending on browser behavior and default values.

Why use :user-valid?

It helps create better UX by:

• Avoiding “green success” styling on untouched fields
• Showing validation feedback only when the user actually engages
• Preventing confusion during form completion

It pairs naturally with :user-invalid to create clean, responsive form validation states.

Basic example

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

input:user-valid {
  border-color: green;
  background-color: #f0fff4;
}

In this example, the input will only turn green after the user enters a valid email address.

Comparison with :valid

This makes :user-valid ideal for modern form UX patterns.

Practical example with feedback text

<label>
  Username:
  <input type="text" required minlength="3">
  <span class="status">Looks good!</span>
</label>

.status {
  display: none;
  color: green;
}

input:user-valid + .status {
  display: inline;
}

The message appears only after the user enters a valid username.