CSS :out-of-range Selector

Posted in CSS Tutorial

Updated on Sep 18, 2024

By Mari Selvan

👁️ 2 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The CSS :out-of-range selector is used to select <input> elements whose values are outside the range defined by their min and max attributes.

This selector allows you to apply custom styles to inputs when users enter values that don't meet the specified constraints, helping to create better form validation experiences.

💡 Syntax

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

Syntax

Copied

input:out-of-range {
    /* CSS properties */
}

The :out-of-range pseudo-class applies to form elements like <input> that have defined ranges, typically using the min and max attributes.

📝 Example

Here is an example of how to use the :out-of-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 :out-of-range Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="age">Enter your age (between 18 and 60):</label>
        <input type="number" id="age" name="age" min="18" max="60">
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for inputs that are within the range */
input:in-range {
    border: 2px solid green;
}

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

In this example:

When a valid number between 18 and 60 is entered, the input gets a green border.
When the number entered is outside the range (less than 18 or greater than 60), the input gets a red border and a light red background.

💬 Usage Tips

The :out-of-range selector is most commonly used with <input type="number"> or <input type="range">, where the min and max attributes define the valid range.
Combine :out-of-range with other pseudo-classes like :in-range for complete styling of both valid and invalid input ranges.
You can also use :out-of-range on date inputs with min and max attributes to enforce a date range.

⚠️ Common Pitfalls

The :out-of-range selector only works with form elements that support the min and max attributes. Using it with other input types that don't have a range won't produce any effect.
Be cautious when relying solely on visual feedback from the :out-of-range selector. Ensure proper server-side validation to handle edge cases or unsupported browsers.
Some older browsers may not support this selector, so test across multiple browsers to ensure consistent styling.

🎉 Conclusion

The :out-of-range selector in CSS is an excellent tool for improving user interface feedback in forms that require range validation.

By using this pseudo-class, you can highlight out-of-range inputs and guide users to provide the correct data, ensuring a smoother and more intuitive form experience.