The :valid
CSS pseudo-class represents any <input>
or other <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.
/* Selects any valid <input> */ input:valid { background-color: powderblue; }
This pseudo-class is useful for highlighting correct fields for the user.
Syntax
:valid
Examples
See :invalid
for an example.
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':valid' in that specification. |
Living Standard | No change. |
HTML5 The definition of ':valid' in that specification. |
Recommendation | Defines the semantics of HTML and constraint validation. |
Selectors Level 4 The definition of ':valid' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support (<input> ) |
10.0 | 20 (12.10240) | 4.0 (2) | 10 | 10.0 | 5.0 |
Apply it to <form> |
(Yes) | No support | 13 (13) | No support | (Yes) | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 4.0 (2) | No support | 10.0 | 5.0 |
Apply it to <form> |
? | No support | 13.0 (13) | No support | ? | ? |
See also
- Other validation-related pseudo-classes:
:required
,:optional
,:invalid
- Form data validation