This pseudo-class is called validity pseudo-class and matches elements regarding their validation status. A validated element is either valid or invalid.
# Syntax
Copy
:valid {
/* declarations */
}
:invalid {
/* declarations */
}
# Example
Copy
:valid {
border: 2px solid green;
}
:invalid {
border: 2px solid red;
}
In this example, the two input elements have the type email. The first input has a valid value and gets a green border while the second input has a red border due to its invalid value.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (10)
Yes (4)
Yes (5)
Yes (12)
Yes (10)
Yes (10)
Mobile
Yes (18)
Yes (4)
Yes (5)
No
No
Yes (10)
For future browser support information, also check out caniuse.com (Validity pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.
Please wait a moment, the comments start loading now...