CSS Selector - Selecting input Elements with Range Limitations








The :in-range selector matches input elements that are in range.

Summary

CSS Version
3

CSS Syntax

:in-range {
   style properties 
}

Browser compatibility

:in-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 {<!--from www.  ja v  a2  s.  co m-->
  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