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 or elements having MIN and/or MAX attributes.

CSS :in-range Example

Consider the following code as an example demonstrating the ":in-range" class in CSS.

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 the user types a number within the specified range, that is, from 10 to 100, then the value's color will be teal with a bold value.

In CSS, the :in-range pseudo-class is used to specify which form elements fall within the given range. The input :in-range selector in this particular code targets the input element with a value between 10 and 100.

The CSS styles specified in the curly braces are applied to the input element when the user enters a number that falls within this range. The input element's text is bold and colored in teal in this example because the color and font-weight properties are both set to teal.

The :in-range pseudo-class is no longer applicable and the input element will not have the specified styles if the user enters a number that is outside the allowed range.

Advantages of the ":in-range" class in CSS

Disadvantages of the ":in-range" class in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!