CSS :in-range

The CSS :in-range pseudo-class targets input elements whose values fall within the defined min and max range. This is useful for styling form elements to visually indicate valid data that falls within the specified range.

The syntax for the :in-range pseudo-class is:

</>
Copy
selector:in-range {
    property: value;
}

Where:

ParameterDescription
selectorThe form element (e.g., <input>) to which the :in-range pseudo-class will apply.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling Number Inputs Within Range

In this example, number input fields with values within the range of 1 to 10 are styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:in-range {
            border: 2px solid green;
        }

        input:out-of-range {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <label>Enter a number (1-10):</label>
        <input type="number" min="1" max="10" required>
    </form>
</body>
</html>

2. Styling Date Inputs Within Range

In this example, date input fields within a specific date range are styled with a green border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="date"]:in-range {
            border: 2px solid green;
        }

        input[type="date"]:out-of-range {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <label>Select a date (2023-01-01 to 2023-12-31):</label>
    <input type="date" min="2023-01-01" max="2023-12-31" required>
</body>
</html>

3. Styling Time Inputs Within Range

Here, valid time inputs within the range of 9:00 AM to 5:00 PM are styled with a lightgreen background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input[type="time"]:in-range {
            background-color: lightgreen;
        }

        input[type="time"]:out-of-range {
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <label>Select a time (9:00 AM - 5:00 PM):</label>
    <input type="time" min="09:00" max="17:00" required>
</body>
</html>