CSS :valid Selector

input:valid {
  border: 4px solid green;
}

Meaning

The :valid selector selects <input> or <form> element whose contents validate successfully.

This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

Also see CSS Selector :invalid

This pseudo-class is useful for highlighting correct fields for the user.

The color green is commonly used to indicate valid input.

People who have certain types of color blindness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Version: CSS3

Standard Syntax

:valid {
  css declarations;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Status

More Example

Styling :invalid and :valid selectors:

input:valid {
  border: 4px solid green;
}

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