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.
The pseudo-class behaves in the same way as the non-standard :moz-ui-invalid pseudo-class.
By default, Gecko applies a style that creates a red "glow" (using the box-shadow property) around items, which have the :moz-ui-invalid pseudo-class applied. See the :invalid pseudo-class for an example that shows how to override the default style.
Syntax
Syntax not found in DB!
Specifications
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4The definition of ':user-invalid' in that specification. | Working Draft | Adds :user-invalid |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
No compatibility data found. Please contribute data for "css.selectors.user-invalid" (depth: 1) to the MDN compatibility data repository.
See also
:user-invalid (:-moz-ui-invalid) by Mozilla Contributors is licensed under CC-BY-SA 2.5.
