Pseudo-razred :out-of-range

Pseudo-razred :out-of-range se uporablja za oblikovanje vnosnih polj, katerih vrednost je izven določenega obsega. Deluje z elementi, ki imajo določene atribute min in max, kot so številčna polja (number) ali območja (range).

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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: " Vrednost mora biti med " attr(data-min) " in " attr(data-max);
        color: #f44336!important;
        font-size: 0.9em;
    }
    
    input:in-range {
        border-color: #4CAF50;
        background-color: #e8f5e9;
    }
</style>
</head>
<body>
    <h3>Preverjanje obsega vrednosti</h3>
    <div>
        <label>Ocena (1-5):</label>
        <input type="number" min="1" max="5" value="7">
        <span data-min="1" data-max="5"></span>
    </div>
    
    <div>
        <label>Temperatura (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>Glasnost (0-100%):</label>
        <input type="range" min="0" max="100" value="150">
        <span data-min="0" data-max="100"></span>
    </div>
</body>
</html>

REZULTAT