Селектор :out-of-range — значення поза межами min і max

HTML

<p>Дозволений діапазон: від 1 до 10.</p>
<input type="number" min="1" max="10" value="12">
<input type="number" min="1" max="10" value="5">

CSS

input:out-of-range {
    border: 2px solid red;
}

HTML

<form class="grid">
    <label>число 12 при межах 1–10
        <input type="number" min="1" max="10" value="12">
        <span class="hint">поза межами — червона рамка</span></label>

    <label>число 5 при межах 1–10
        <input type="number" min="1" max="10" value="5">
        <span class="hint">у межах — зелена рамка</span></label>

    <label>⚠️ порожнє поле при межах 1–10
        <input type="number" min="1" max="10" value="">
        <span class="hint">порожнє = <code>:in-range</code>, а не поза межами</span></label>

    <label>число 999 БЕЗ min і max
        <input type="number" value="999">
        <span class="hint">немає меж — немає й діапазону, рамки не буде</span></label>

    <label>⚠️ readonly зі значенням 99 при межах 1–10
        <input type="number" min="1" max="10" value="99" readonly>
        <span class="hint">не бере участі в перевірці — жодної рамки</span></label>

    <label>disabled зі значенням 99 при межах 1–10
        <input type="number" min="1" max="10" value="99" disabled>
        <span class="hint">те саме: обмеження не перевіряються</span></label>

    <label>⚠️ крок 10, значення 25, межі 0–100
        <input type="number" min="0" max="100" step="10" value="25">
        <span class="hint">це <code>:invalid</code>, але <code>:in-range</code></span></label>

    <label>дата 2025 при межах 2020 року
        <input type="date" min="2020-01-01" max="2020-12-31" value="2025-05-05">
        <span class="hint">діапазон працює не лише з числами</span></label>

    <label>повзунок 5 при межах 1–10
        <input type="range" min="1" max="10" value="5">
        <span class="hint">повзунок фізично не виїде за межі — червоної рамки
            тут не буде ніколи</span></label>
</form>

CSS

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    max-width: 780px;
}

label {
    display: block;
    padding: 8px 12px 10px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: .88rem;
}

input {
    display: block;
    width: 100%;
    margin: 8px 0 4px;
    padding: 4px 6px;
    box-sizing: border-box;
}

input:in-range {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

input:out-of-range {
    outline: 3px solid #d64545;
    outline-offset: 2px;
}

/* окремо — «взагалі неправильне»: сюди потрапляє й порушений крок */
input:invalid + .hint::after {
    content: " · :invalid";
    color: #d1a04a;
    font-weight: 700;
}

.hint {
    display: block;
    color: #5a6472;
    font-size: .8rem;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}