W3cubDocs

/CSS

:user-invalid (:-moz-ui-invalid)

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.

Note: The pseudo-class behaves in the same way as the non-standard :-moz-ui-invalid pseudo-class.

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;
}

Specifications

Specification
Selectors Level 4 # user-invalid-pseudo

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`:user-invalid`	No See bug 1156069.	No See bug 1156069.	884	No	No See bug 1156069.	16.4	No See bug 1156069.	No See bug 1156069.	884	No See bug 1156069.	16.4	No See bug 1156069.