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

The ":in-range" pseudo-class allows users to receive visual feedback on the validity of their input. It enables web developers to style form elements differently depending on whether or not the input falls within the specified range.
The ":in-range" pseudo-class can help improve a website's accessibility by providing visual feedback to users about the validity of their input. This is especially important for users who may be blind or have other disabilities.
The ":in-range" pseudo-class can help reduce errors and prevent users from submitting invalid data by visually indicating whether an input is within the specified range or not.

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

Not all browsers are capable of supporting the ":in-range" pseudo-class. This means that if a website makes use of this pseudo-class, some users might not experience it as intended.
Only form elements with a minimum and maximum value are covered by the ":in-range" pseudo-class. It cannot be used to style or validate input from other types of form elements.
The ":in-range" pseudo-class can be overridden by other CSS styles, so it might not always be useful for informing users visually of the accuracy of their input.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!