:invalid pseudo-class

Applies one or more styles to specified input fields when the fields are invalid.

Internet Explorer 10



selector:invalid {...}



A CSS simple selector.


The criteria used to determine whether an input field is valid correspond to the properties of the ValidityState Document Object Model (DOM) object. For more information on determining validity, see the following reference topics:



The input field has raised a custom error, which has been set by the element's setCustomValidity method (string is not empty).


The user entered something that does not match what the pattern attribute specifies, such as letters when numbers were expected.


The user entered a value greater than what was specified by the max attribute on a range control.


The user entered a value less than what was specified by the min attribute on a range control.


The user entered a value that doesn't correspond to an allowed value as specified by the step and min attributes. For example, the user entered an odd number when even numbers were expected.


A control has a value that is longer than the maxlength attribute specifies. Because Windows Internet Explorer allows a user to enter only the maxlength number of characters, this usually occurs when the default value contains too many characters.


The user entered something that is not the correct syntax, such as an incorrectly formatted URL or email address.


The input field value does not have any validity errors.


The user has not entered a value on a required field.


A required field will be invalid until the correct input is entered. A field that isn't required but has validation, such as a URL field, will be valid until text is entered.


The following example puts a green border on a field when it is valid and a red border with bold text when it isn't. The email field is required, but the others aren't. The URL field is pre-filled with a bad URL, so it isn't valid when the page opens. In addition, the two optional fields are styled with light gray backgrounds, and the required field with an eye-catching yellow background.

<!DOCTYPE html >
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid { 
    border:solid lime;
  #PC1 input:invalid { 
    border:solid red;
  #PC1 input:required {
  #PC1 input:optional {
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>       
    <p>* required field</p>

You can view this page. (Internet Explorer 10 or a browser that supports the form validation pseudo-classes is required for this page to render correctly.)

See also

HTML5 Forms (Internet Explorer 10 Guide for Developers)
validity attribute
ValidityState object
Related pseudo-classes