CSS Selector - Selecting input Elements with Range Limitations

The :out-of-range selector selects those that are not.

Summary

CSS Version: 3

CSS Syntax

:out-of-range {
   style properties 
}

Browser compatibility


`:out-of-range`	Yes	No	Yes	Yes	Yes

Example

The following code uses the :in-range and :out-of-range Selectors.

<!DOCTYPE HTML>
<html>
<head>
<style>
:in-range {<!-- w  ww  .  j a  va 2s  . c om-->
  outline: medium solid green;
}
:out-of-range: {
  outline: medium solid red;
}
</style>
</head>
<body>
  <form method="post" action="http://example.com/form">
    <p>
      <label for="price"> $ per unit in your area: <input
        type="number" min="0" max="10" value="11" id="price" name="price" />
      </label>
    </p>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo