:invalid

invalid=

Examples

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 >
<html>
<head>
  <title>:valid/:invalid Pseudo-class Example</title>
  <style type="text/css">

  #PC1 input:valid {
    border:solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid {
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required {
    background-color:Yellow;
  }
  #PC1 input:optional {
    background-color:LightGray;
  }
  </style>
</head>
<body>
  <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>
  </form>
</body>
</html>

Notes

Remarks

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: {

Syntax

selector

invalid

### Parameters

selector: A CSS simple selector.

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]

:invalid

Examples

Notes

Remarks

Syntax

See also

Related articles

Pseudo-Classes

Selectors

Related pages

Attributions