CSS :invalid Pseudo-class

Definition and Usage

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

Note:This pseudo-class only applies to form elements with restrictions, such as input elements with min and max attributes, email fields without valid email, or numeric fields without numbers, etc.

Note:If any radio button in a radio button group is required, this pseudo-class will be applied to all radio buttons if no radio button in the group is selected.

Tip:Use :valid Pseudo-classes set the style of valid form elements.

Example

Set the style of invalid <fieldset> and <input> elements:

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

Try It Yourself

CSS Syntax

:invalid {
  css declarations;
}

Technical Details

Browser Support

The numbers in the table specify the first browser version that fully supports the pseudo-class.

Related Pages

Reference:CSS :valid selector