:in-range - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:in-range

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. in-range

Description

The :in-range selector selects elements whose value is within the specified range.

The :in-range selector only works with elements who have range limitations, input elements with min and max attributes.

Example

Select only if the value of the <input> element is "in range":

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
input:in-range {<!--from  www  . j a  v a 2 s.c o  m-->
    border: 2px solid blue;
}
</style>
</head>
<body>

<input type="number" min="5" max="10" value="7">

<p>range is between 5 and 10</p>


</body>
</html>

Related Tutorials