The:user-invalidCSSpseudo-class represents any validated form element whose value isn't valid based on theirvalidation 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 name="email" type="email" required />  <span></span></form>

input:user-invalid {  border: 2px solid red;}input:user-invalid + span::before {  content: "✖";  color: red;}

Specifications

Browser compatibility

See also

• :valid
• :invalid
• :required
• :optional
• :user-valid