HTML & CSS reference

:user-invalid

Matches an invalid field only after the user has interacted with it; `:user-valid` is the opposite.

Syntax

input:user-invalid { … }

Examples

The field turns red only after you leave it with a wrong value:

<style>
  input:user-invalid { border: 2px solid crimson; background: mistyrose; }
  input:user-valid { border: 2px solid seagreen; }
</style>
 
<p>Type something wrong, then click outside the field:</p>
<input type="email" placeholder="Email" required>

Notes

Supported by all current browsers since 2023. In older ones the rule is simply ignored, and the form still works.

Related recipes

In the tutorial

Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.

Thanks for reading!