:invalid
:invalid is a CSS pseudo-class used to select and style form <input> elements whose value is invalid according to its type specified in the type attribute.
For example, number input types (<input type="number">) that have an alphabet character value, or email inputs (<input type="email">) whose value does not match a valid email address pattern.
In some browsers, :invalid also matches a form (<form>) and a fieldset (<fieldset>) that have one or more input elements that have invalid values according to their type value.
Trivia & Notes
When a number input type (<input type="number">) is out of the range of permitted values specified using the min and max attributes, then the :invalid pseudo-class matches, and also the :out-of-range pseudo-class matches. Any styles applied using :out-of-range will override the styles applied using :invalid. This kinda makes sense since :out-of-range is more specific, as it is a subset of all the cases that would match :invalid.
The :invalid pseudo-class also applied to all of the buttons in a group of radio buttons (they have the same name attribute value) if one of the buttons is required (has the required attribute) but none of the buttons in the group is selected.
Just like other pseudo-class selectors, the :invalid selector can be chained with other selectors such as :hover and :focus, among others. For example, the following rule will provide focus styles for the element that is in an invalid state, adding a soft red glow around it to grab the user’s attention to it:
input:invalid:focus {
outline: 0;
border: none;
box-shadow: 0 0 3px 6px rgba(255, 0, 0, 0.3);
}
You can see a live demo of this in the live demo section below.
Examples
input[type="number"]:invalid {
background-color: tomato;
}
input:invalid {
box-shadow: 0 0 3px 5px rgba(255, 0, 0, .2);
}
Live Demo
The following demo shows different input types that will get a red background color when the value entered in them is invalid. The inputs will also get a subtle red box shadow when they are focused.
View this demo on the Codrops PlaygroundBrowser Support
The :invalid pseudo-class is supported in Chrome 10+, Firefox 4+, Safari 5+, Opera 10+, Internet Explorer 10+ and on iOS.
Using :invalid to select a form that has an invalid input currently only works in Firefox 13+.
Notes
The following notes about Firefox are from this entry on MDN.
By default, Gecko does not apply a style to the :invalid pseudo-class. However it does apply a style (a red “glow” using the box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.
You can disable the glow using the following CSS, or completely override it to alter the appearance of invalid fields.
:invalid {
box-shadow: none;
}
:-moz-submit-invalid {
box-shadow: none;
}
:-moz-ui-invalid {
box-shadow:none;
}