Firefox Tomorrow

css pseudo class

`:user-invalid` CSS pseudo-class

View on MDN ↗

The :user-invalid CSS pseudo-class represents any validated form element whose value isn’t valid based on their validation constraints, after the user has interacted with it.

The :user-invalid pseudo-class must match an :invalid, :out-of-range, or blank-but :required element between the time the user has attempted to submit the form and before the user has interacted again with the form element.

Syntax

:user-invalid {
  /* ... */
}

Examples

Setting a color and symbol on :user-invalid

In the following example, the red border and ❌ only display once the user has interacted with the field. Try typing something other than an email address to see it in action.

<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>

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

input:user-invalid + span::before {
  content: "✖";
  color: red;
}
Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also