:valid / :invalid

Validity

The validity pseudo-classes match valid or invalid <input> or <form> elements.

An element without validity semantics is neither :valid nor :invalid.

:valid

The :valid pseudo-class represents an <input> element whose content validates. This tells the user that their input is valid.

:invalid

The :invalid pseudo-class represents an <input> element whose content does not validate. This tells the user that their input is invalid and must be changed.

Browser Support (tested using latest versions)

Desktop
Google Chrome
Yes
Mozilla Firefox
Yes
Safari
Yes
Opera Browser
Yes
Internet Explorer
Yes
Mobile
Android Browser
No
Chrome for Android
No
Mozilla Firefox Mobile
Yes
Safari iOS
Yes
Opera Mobile
Yes
IE Mobile
No

Syntax

E:valid { /* Style properties */ }

E:invalid { /* Style properties */ }

Example

/* In this example, all valid input fields will have a green outline, while invalid ones will have a red outline. */

input:valid {
outline: 1px solid green;
}

input:invalid {
outline: 1px solid red;
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.