: в діапазоні - CSS-хитрощі

:in-rangeСелектор псевдо в CSS відповідає вхідних елементів , коли їх значення знаходиться в межах діапазону , зазначеного як прийнятно. Він є частиною специфікації CSS Selectors Level 4, яка наразі знаходиться у проекті редактора.

input:in-range ( border: 5px solid green; )

Я вважаю, що це актуально лише для input(type=number). Діапазон входів не допускає значень, що перевищують мінімальне / максимальне, і це не має особливого сенсу для будь-якого іншого типу введення. Можливо, введення тексту з текстом y з максимальною довжиною, але поведінка більшості браузерів полягає в тому, щоб у будь-якому випадку запобігти входу після максимальної.

Демо

Так само, як і код вище, цей вхід буде мати зелену межу, коли його значення знаходиться між 5 і 10.

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.