CSS :valid Pseudo-class

Definition and Usage

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

Tip:Using :invalid Selector sets the style of invalid form elements.

Example

Select and set the style of the valid <input> element:

input:valid {
  background-color: beige;
  border: 2px solid green;
}

Try It Yourself

CSS Syntax

:valid {
  css declarations;
}

Technical Details

Version: CSS4

Browser Support

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

Chrome Edge Firefox Safari Opera
10 12 4 5 10

related page

Reference:CSS :invalid pseudo-class