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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1012410105
Applies to <form> elements Yes No13 No Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes4105 ?
Applies to <form> elements ? ? No14 ? ? ?

See also

Document Tags and Contributors

 Last updated by: fscholz,