CSS Selector Level 4 » Validity pseudo-class

This pseudo-class is called validity pseudo-class and matches elements regarding their validation status. An 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 its invalid value.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (10) Yes (4) Yes (5) Yes (12.0) Yes (10) Yes (10)
Mobile No Yes (4) Yes (5) No No Yes (10)

Usage statistics (Alexa Top 500,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera