CSS :valid Selector

❮ Previous CSS Selectors Reference Next ❯

Example

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

input:valid {
background-color: yellow;
}

Definition and Usage

The :valid selector selects form elements with a value that validates according to the element's settings.

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

Tip: Use the :invalid selector to select form elements with a value that does not validate 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
:valid	10.0	10.0	4.0	5.0	10.0

CSS Syntax

:valid {
css declarations;
} Demo