: в пределах диапазона - CSS-хитрости

:in-rangeСелектор псевдо в CSS соответствует входных элементов , когда их значение находится в пределах диапазона , указанного как приемлемо. Это часть спецификации CSS Selectors Level 4, которая в настоящее время находится в черновике редактора.

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

Я считаю, что это актуально только на input(type=number). Входы диапазона не допускают значений за пределами их минимального / максимального значения, и это не имеет особого смысла для любого другого типа ввода. Возможно, текстовые входы с максимальной длиной, но поведение на них в большинстве браузеров заключается в том, чтобы в любом случае предотвращать вход после максимального значения.

Демо

Как и в приведенном выше коде, этот вход будет иметь зеленую рамку, когда его значение будет между 5 и 10.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.