:user-invalid

Baseline 2023

Newly available

Since ⁨November 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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.