CSS :in-range Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 10 - 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

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

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.