CSS Selector - Selecting Valid 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

:valid {
   style properties 
}

Browser compatibility

:valid Yes 10.0 Yes Yes Yes




Example

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

<!DOCTYPE HTML>
<html>
<head>
<style>
:invalid {<!--  w  ww. j a  va2 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