CSS :invalid Selector

❮ Previous CSS Selectors Reference Next ❯

Example

Select and style only if the value of the <input> element is invalid:

input:invalid {
border: 2px solid red;
}

Definition and Usage

The :invalid selector selects form elements with a value that does not validate according to the element's settings.

Note: The :invalid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields without a legal email, or number fields without a numeric value, etc.

Tip: Use the :valid selector to select form elements with a value that validates according to the element's settings.

Version:	CSS3

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:invalid	10.0	10.0	4.0	5.0	10.0

CSS Syntax

:invalid {
css declarations;
} Demo