CSS Selector - Selecting invalid input Elements

The :valid and :invalid selectors match input elements that have met or failed their input validation requirements, respectively.

Summary

CSS Version: 3

CSS Syntax

:invalid {
   style properties 
}

Browser compatibility


`:invalid`	Yes	10.0	Yes	Yes	Yes

Example

The following code uses the :valid and :invalid Selectors.

<!DOCTYPE HTML>
<html>
<head>
<style>
:invalid {<!-- w  w  w  .j a v a  2  s  .  c  o  m-->
  outline: medium solid red;
}

:valid {
  outline: medium solid green;
}
</style>
</head>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="name">Name: <input required id="name" name="name" /></label>
    </p>
    <p>
      <label for="name">City: <input required id="city" name="city" /></label>
    </p>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Click to view the demo