CSS :user-invalid Pseudo-class

Definition and Usage

CSS :user-invalid Pseudo-classes are used to set the style of invalid form elements after user interaction.

Tip:Usage :user-valid Pseudo-classes set the style of valid form elements (after user interaction).

Example

Set the style of the <input> element to invalid after the user interacts with it:

input:user-invalid {
  border: 2px solid red;
  background-color: beige;
}

Try It Yourself

CSS Syntax

:user-invalid {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version to fully support the pseudo-class.

Related Pages

Reference:CSS :user-valid pseudo-class