CSS :valid selector allows you to style an <input> element only if the value that it contains is valid. The value that it contains is valid or not is decided by the settings of the element.
For example, if we take an <input> element with type="number" and set its limits using the min="10" and max="20" attributes, it expects a value between 10 and 20.
If the value entered in this input element is between 10 and 20, it’s a valid value. Otherwise, it will be considered an invalid value.
The :valid selector in the following example sets a springgreen color background to the input element only if the value it contains is between 10 and 20:
Example:
input:valid{
background-color: springgreen;
}
The :valid selector in the following example sets a springgreen color background to the <input> element only if it contains a valid email address.
Example:
input[type="email"]:valid{
background-color: springgreen;
}
CSS Syntax
The syntax of the :valid selector is as follows:
:valid{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the :valid selector.
| Selector | |||||
| :valid | 10.0 | 10.0 | 4.0 | 5.0 | 10.0 |
