:in-range

Содержание

Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

Синтаксис

Селектор:in-range { ... }

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>:in-range</title>
  <style>
   input:in-range {
    background: #e2edc1; /* Число в указанных пределах */
   }
   input:out-of-range {
    background: #f9c3d2; /* Неверное число */
   }
  </style>
 </head>
 <body>
  <form>
   <p>Введите число от 1 до 10</p>
   <p><input type="number" min="1" max="10" value="1"></p>
  </form>
 </body>
</html>

В данном примере при вводе числа от 1 до 10 у поля становится зелёный цвет фона, как только пишется буква или число больше 10, то цвет фона меняется на розовый.

Спецификация

СпецификацияСтатус
Selectors Level 4Редакторский черновик
CSS Basic User Interface Module Level 3Рабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
10115.228
AndroidFirefox MobileOpera MobileSafari Mobile
2.316115.2




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 12:58 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru