Pseudo-class :out-of-range

The :out-of-range pseudo-class is used to style input fields whose value is outside the specified range. It works with elements that have min and max attributes defined, such as number inputs or range inputs.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    input {
        padding: 8px;
            margin: 10px;
            border-radius: 4px;
            border: 2px solid #2196F3;
    }
    
    input:out-of-range {
        border-color: #f44336;
        background-color: #ffebee;
    }
    
    input:out-of-range + span::after {
        content: " Value must be between " attr(data-min) " and " attr(data-max);
        color: #f44336!important;
        font-size: 0.9em;
    }
    
    input:in-range {
        border-color: #4CAF50;
        background-color: #e8f5e9;
    }
</style>
</head>
<body>
    <h3>Range Value Validation</h3>
    <div>
        <label>Grade (1-5):</label>
        <input type="number" min="1" max="5" value="7">
        <span data-min="1" data-max="5"></span>
    </div>
    
    <div>
        <label>Temperature (36-38°C):</label>
        <input type="number" min="36" max="38" step="0.1" value="35.5">
        <span data-min="36" data-max="38"></span>
    </div>
    
    <div>
        <label>Volume (0-100%):</label>
        <input type="range" min="0" max="100" value="150">
        <span data-min="0" data-max="100"></span>
    </div>
</body>
</html>

RESULT