This pseudo-class is called user-interaction pseudo-class and represents elements with invalid input but only after the user interacted with the matched element, for example by focusing it or trying to submit a form containing it.
# Syntax
Copy
:user-invalid {
/* declarations */
}
# Example
Copy
:user-invalid {
border-color: red;
}
In this example, the input with invalid content will have a red border after it gets focused.
Try example in CodePen# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
No
Yes (88)
No
No
No
No
Mobile
No
Yes (88)
No
No
No
No
For future browser support information, also check out caniuse.com (User-interaction pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.
Please wait a moment, the comments start loading now...