CSS :in-range Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

27 - Views

4 mins

1 Comment

Photo Credit to CodeToFun

Introduction

The CSS :in-range selector is used to select form elements whose values fall within a specified range.

This selector typically applies to input elements like <input type="number"> and <input type="range">, where a min and max value has been defined. It allows you to style inputs that are within the valid range, providing users with clear feedback about the acceptability of their input.

Syntax

The signature of the :in-range Selector is as follows:

Syntax

Copied

:in-range {
    /* CSS properties */
}

The :in-range pseudo-class targets any form control whose current value is within the constraints set by the min and max attributes.

Example

Here is an example of how to use the :in-range selector in CSS:

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :in-range Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="age">Enter your age (18-60):</label>
        <input type="number" id="age" name="age" min="18" max="60">
        
        <label for="quantity">Select quantity (1-100):</label>
        <input type="range" id="quantity" name="quantity" min="1" max="100">
    </form>
</body>
</html>

CSS

Copied

/* Style for in-range inputs */
:in-range {
    border: 2px solid green;
    background-color: #e0ffe0;
}

/* Style for out-of-range inputs */
:out-of-range {
    border: 2px solid red;
    background-color: #ffe0e0;
}

In this example:

Inputs that are within the defined range (like age between 18 and 60) are styled with a green border and a light green background.
If the user inputs a value outside the valid range, the input will be styled with a red border and a light red background using the :out-of-range selector.

Usage Tips

The :in-range selector works well when combined with the :out-of-range selector to provide visual feedback on both valid and invalid inputs.
It only applies to input elements that have a min and max attribute. Without these attributes, the selector will not have any effect.
This selector is most useful for form validation, where real-time feedback about valid input is desired.

Common Pitfalls

Not all browsers provide native support for input validation. Ensure that you have a fallback method for older browsers that do not fully support the :in-range pseudo-class.
The :in-range selector works only with numeric input types such as number, range, date, and time. Other input types will not respond to this pseudo-class.

Conclusion

The :in-range selector is a valuable tool for styling input elements based on their value range, improving user interaction and form validation. It provides a clear visual cue for users, helping them input data within the expected range. When paired with :out-of-range, it ensures that form fields dynamically reflect valid and invalid input states, enhancing both functionality and accessibility.