Jobs Hub

CSS :in-range

The CSS :in-range pseudo-class is used when we need to apply the style to all those values that are within a specified range.

Note - The :in-range selector works with INPUT fields/elements having MIN and/or MAX attributes.

CSS :in-range Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      input:in-range {color: teal; font-weight: bold;}
   </style>
</head>
<body>

   <form>
      Enter a Number: <input type="number" min="10" max="100">
   </form>

</body>
</html>
Output
Enter a Number:

Note - When user types a number within the specified range, that is from 10 to 100, then the value or number's color will be teal with bold value.

CSS Online Test

« Previous Tutorial Next Tutorial »