CSS Selector Level 4 » User-interaction pseudo-class

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.


:user-invalid {
    /* declarations */


:user-invalid {
    border-color: red;

In this example the input with invalid content will have a red border after it got focused.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop No No No No No No
Mobile No No No No No No

Usage statistics (Alexa Top 1,250,000 sites)

Please wait a moment, the comments start loading now...