:in-range в CSS — значення поля форми в межах min і max

HTML

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

CSS

input:in-range {
    border: 2px solid yellow;
}

HTML

<form class="grid">
    <label>number, min=1 max=5, значення 3
        <input type="number" min="1" max="5" value="3"></label>

    <label>number, min=1 max=5, значення 9
        <input type="number" min="1" max="5" value="9"></label>

    <label>number, min=1 max=5, ПОРОЖНЄ — і це «в межах»
        <input type="number" min="1" max="5"></label>

    <label>number БЕЗ меж, значення 3 — жодного стану
        <input type="number" value="3"></label>

    <label>number, min=0 max=10 step=2, значення 3 — у межах, але невалідне
        <input type="number" min="0" max="10" step="2" value="3"></label>

    <label>date, 2026 рік, значення з 2027 — поза межами
        <input type="date" min="2026-01-01" max="2026-12-31" value="2027-05-05"></label>

    <label>time, з 09:00 до 18:00, значення 20:00 — поза межами
        <input type="time" min="09:00" max="18:00" value="20:00"></label>

    <label>вимкнене, значення 9 при max=5 — поза перевіркою
        <input type="number" min="1" max="5" value="9" disabled></label>

    <label>лише для читання, значення 9 при max=5 — теж поза перевіркою
        <input type="number" min="1" max="5" value="9" readonly></label>

    <label>text із min і max — атрибути нічого не означають
        <input type="text" min="1" max="5" value="9"></label>

    <label>повзунок: вийти за межі не може, тому завжди «в межах»
        <input type="range" min="0" max="10" value="50"></label>
</form>

<p class="note">Сірі рамки — це не помилка стилів, а точна робота селекторів:
    там, де меж немає або поле не бере участі в перевірці, обидва правила
    мовчать.</p>

CSS

.grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
    padding: 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

label {
    display: block;
    color: #5a6472;
    font-size: .9em;
}

input {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 8px;
    border: 3px solid #cfd6e0;
    border-radius: 4px;
    background: #f7f8fa;
    font-size: 1rem;
}

input:in-range {
    border-color: #3a9a4f;
    background: #edf9ef;
}

input:out-of-range {
    border-color: #d64545;
    background: #fdeeee;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}