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

: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

See also

Last modified: Aug 12, 2021, by MDN contributors