Товаров: 0 (0р.)

Range input css: Styling Cross-Browser Compatible Range Inputs with CSS

Содержание

— HTML | MDN

Элементы <input> с типом range позволяют пользователю определить числовое значение, которое должно быть в пределах указанного промежутка. Однако, точное значение должно быть не слишком важно. Обычно они представляет собой слайдер или контроллер, но не текстовое поле как number. Так как этот виджет неточен, его не следует использовать, в случае, если важно установить точное значение .

Исходный код данного примера расположен в GitHub репозитории. Если вы хотите внести внести изменения в привер, пожалуйста склонируйте https://github.com/mdn/interactive-examples и отправьте нам пул реквест.

Если используемый браузер не поддерживает тип range, он будет отображаться как inputtext (en-US).

Валидация

Для этого поля нет доступного паттерна валидации, но следующая валидация реализованы следующие проверки

  • Если значение value содержит что-то что не может быть конвертированно в число с плавающей точкой, произойдёт ошибка некорректного ввода.
  • Значение не может быть меньше чем min. По умолчанию: 0.
  •  Значение не может быть больше чем max. По умолчанию: 100.
  • Значение должно кратно step. По умолчанию: 1.

Атрибут value содержит DOMString, который содержит строковое представление выбранного числа. Значение никогда не является пустой строкой (""). Значение, по умолчанию, находится посередине, между указанными минимальным и максимальным значениями — если максимум оказывается меньше минимума, то значение по умолчанию приравнивается к значению атрибута

min. Алгоритм определения значения по умолчанию:

defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

Если предпринята попытка установить значение меньше минимального, то оно примет значение атрибута min. Аналогично, попытка установить значение больше максимального, приведёт к установлению значения равного атрибуту max.

В дополнение к атрибутам, общим для всех элементов <input>, range инпуты предлагают следующие атрибуты:

AttributeDescription
listid элемента <datalist>, который содержит предопределённые значение (не обязательно)
maxМаксимальное допустимое значение
minМинимальное допустимое значение
stepШаговый, используемый для пользовательского интерфейса и для проверки

Смотрите управление диапазоном с помощью решётки ниже, для примера того, как параметры диапазона обозначаются в поддерживаемых браузерах.

max

Это значение должно быть больше или равно значению атрибута  min.

min

Наименьшее значение в диапазоне допустимых значений. Если value, введённый в элемент, меньше этого значения, то элемент не проходит  проверку ограничения. Если значение атрибута

min не является числом, то элемент не имеет максимального значения.

Это значение должно быть меньше или равно значению атрибута max.

step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as

min and max).

Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

По умолчанию шаг для инпута с типом range равен 1, допустим ввод только целых чисел, если  база шага не является целым; например, если вы установили min на -10 и value на 1.5, то step  1 позволит только такие значения как 1.5, 2.5, 3.5,… в положительном направлении и -0.5, -1.5, -2.5,… в отрицательном направлении.

Не стандартные атрибуты

AttributeDescription
orientУстанавливает ориентацию слайдера. Firefox only.
orient
Похоже на  -moz-orient не стандартное CSS свойство влияющее на <progress> и<meter> элементы, orient атрибут определяем ориентацию слайдера. Значение horizontal, значит что слайдер будет отображён горизонтально, а vertical— что вертикально .

Note: Следующие атрибуты не применимы: accept, alt, checked, dirname, 

formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, и width. Каждый из них будет проигнорирован в случае употребления.

Пока тип number позволяет пользователям вводить число с дополнительными ограничениями, заставляя их значения находиться между максимальным и минимальным, он требует, чтобы они вводили определённое значение. Инпут с типом range позволяет вам запрашивать у пользователя значение в тех случаях, когда пользователь не может даже знать — каково выбранное конкретное числовое значение.

Несколько примеров основный ситуаций, в которых инпуты с range используются:

  • Аудио-контроллеры громкости и баланса, или контроллеры фильтра.
  • Контроллеры настройки цвета, такие как цветовые каналы, прозрачность, яркость, и т.д.
  • Контроллеры игровой настройки, такие как  сложность, дальность видимости, размер мира и т.д.
  • Длина пароля для сгенерированных паролей менеджера паролей.

Как правило, если пользователь в большей степени интересуется процентным значением между минимумом и максимумом, нежели реальным значением, range инпут является отличным решением. Например, в случае с контролем громкости домашнего стерео, обычно пользователь думает «установить громкости наполовину максимума» вместо «установить громкость на 0.5».

Указание минимума и максимума

По умолчанию, минимум равен 0, а максимум равен 100. Если вас это не устраивает, вы можете с лёгкостью указать другие границы, изменив значения атрибутов min и/или max. Они могут быть принимать любые значения с плавающей точкой.

Например, указать диапазон значений между -10 и 10, вы можете, используя:

<input type="range" min="-10" max="10">

Настройка детализации значения

По умолчанию, степень детализации равна 1, тем самым показывая, что значение всегда является целым числом. Вы можете изменить атрибут

step контроля степени детализации. Например, если вам нужно значение между 5 и 10, с точностью до двух знаков после запятой, вы должны установить значение step на 0.01:

<input type="range" min="5" max="10" step="0.01">

Если вы хотите принять любое значение, независимо от разрядности, вы можете указать значение any для атрибута step:

<input type="range" min="0" max="3.14" step="any">

Этот пример позволяет пользователю выбрать любое значение между 0 и π без ограничений на разрядность.

Добавление хэш-меток и лейблов

Спецификация HTML даёт браузерам некоторую гибкость при представлении диапазонных контроллеров. Нигде эта гибкость не проявляется больше, чем в области хэш-меток и, в меньшей степени, лейблов. Спецификация описывает как добавлять кастомные точки контроллера диапазона, используя атрибут list и элемент <datalist>, но не имеет требований или рекомендаций по стандартизации хэш-меток и лейблов по длине контроллера.

Макеты контроллера диапазона

Так как браузеры имеют эту гибкость, и на сегодняшний день ни один из них не поддерживает все возможности, определённые HTML, представляем несколько макетов, показывающих как вы можете получить на macOS в браузере, который их поддерживает.

Недекорированный контроллер диапазона

Этот результат вы получите, если не укажите атрибут

list, или браузер не будет его поддерживать.

HTMLScreenshot
Контроллер диапазона с хэш-метками

Контроллер диапазона, использующий атрибут list, указывающий ID <datalist>, который определяет серию хэш-меток на контроллере. Их одиннадцать, одна на 0% и на каждой отметки 10%. Каждая точка представлена с помощью элемента <option> с его набором value значений диапазона, при котором должна быть нарисована метка.

HTMLScreenshot
<input type="range" list="tickmarks">

<datalist>
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100">
</datalist>
Контроллер диапазона с хэш-метками и лейблами

Вы можете добавить лейблы в свой контроллер диапазонов, добавив атрибут label элементам <option>, соответствующим значениям, на которых вы бы хотели видеть лейблы.

HTMLScreenshot
<input type="range" list="tickmarks">

<datalist>
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

Примечание: В настоящее время ни один браузер полностью не поддерживает эти возможности. Firefox не поддерживает хэш-метки и лейблы, например, в то время как Chrome поддерживает хэш-метки, но не поддерживает лейблы. Версия 66 (66.0.3359.181) Chrome поддерживает лейблы, но тэг <datalist> должен быть стилизован с помощью  CSS, так как его свойство display по умолчанию —  none, тем самым скрывая лейблы.

Изменение ориентации

По умолчанию, если браузер отображает инпут диапазона как слайдер, он отобразит его так чтоб ползунок ездил в право и в лево. Когда поддержка браузерами будет реализовано, можно будет делать слайдер вертикальным, так чтобы ползунок мог ездить вверх и вниз. Ни один из наиболее используемых браузеров не имплементировал это пока. (Firefox баг 981916, Chrome bug 341071). также, возможно, следующий баг под вопросом.

В реальности, мы можем сделать слайдер вертикальным используя CSS трансформации, или применяя уникальный метод для каждого браузера в отдельности, включая: настройки appearance  для slider-vertical, использование нестандартной ориентации orient в Firefox,или изменение text direction для Internet Explorer и Edge

Рассмотрим контроллер диапазона:

<input type="range" min="0" max="11" value="7" step="1">
ScreenshotLive sample

Это горизонтальный контроллер (по крайне мере на большинстве основных браузеров, другие могут отличаться).

Standards

Следуя спецификации, сделать его вертикальным также просто как добавить CSS, чтобы изменить размеры контроллера, чтобы его высота оказалась больше ширины:

CSS
#volume {
  height: 150px;
  width: 50px;
}
HTML
<input type="range" min="0" max="11" value="7" step="1">
Результат
ScreenshotLive sample

К сожалению, большинство браузеров сейчас не поддерживают вертикальные контроллы напрямую.

transform: rotate(-90deg)

Но вы, всё же, можете сделать вертикальный контролл используя горизонтальный контролл. Самый простой способ — использовать CSS: применяя transform для поворота элемента на 90 градусов. Посмотрим:

HTML

В HTML нужно добавить обёртку вокруг <input>  — <div>, что позволит нам исправить макет после выполнения трансформации (т.к. трансформация автоматически не влияет на макет страницы):

<div>
  <input type="range" min="0" max="11" value="7" step="1">
</div>
CSS

Теперь нам нужно немного CSS. Во-первых, это CSS для самой обёртки; это указание дисплея и размеров для правильного расположения на странице; по сути, он резервирует область страницы для слайдера, так, чтобы можно было поместить повёрнутый слайдер в зарезервированном пространстве, не создавая беспорядка.

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

Затем информация о стиле элемента <input> в зарезервированном пространстве:

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

Размеры контроллера это набор из 150 пикселей длины и 20 пикселей высоты. Маржинги установлены на  0 и transform-origin (en-US) смещается в середину пространства, на котором вращается слайдер; поскольку слайдер имеет ширину 150 пикселей, он вращается через прямоугольник по 150 пикселей с каждой стороны. Смещение начала координат на 75px по каждой оси означает, что мы будем вращаться вокруг центра этого пространства. Наконец, мы поворачиваем против часовой стрелки на 90°. Результат: инпут range, который вращается таким образом, что максимальное значение находится сверху, а минимальное снизу.

ScreenshotLive sample

appearance property

Свойство appearance имеет нестандартное значение slider-vertical , которое делает слайдер вертикальным.

HTML

Используем тот же HTML что и в предыдущем примере:

<input type="range" min="0" max="11" value="7" step="1">
CSS

Берём только те инпуты что имеют тип range:

input[type="range"] {
  -webkit-appearance: slider-vertical;
}

orient attribute

В Firefox, реализовано нестандартное свойство orient.

HTML

Используем тот же HTML что и в предыдущем примере и добавляем атрибут со значением vertical:

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">

writing-mode: bt-lr;

Свойство writing-mode может быть использовано для специальных эффектов 

HTML

Используем тот же HTML что и в предыдущем примере:

<input type="range" min="0" max="11" value="7" step="1">
CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right:

input[type="range"] {
  writing-mode: bt-lr;
}

Все вместе

Каждый из вышеперечисленных примеров работает в своём браузере, мы попробуем объединить все вместе чтоб добиться кроссбраузерности решения:

HTML

Оставим orient атрибут  со значением vertical для Firefox:

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">
CSS

Берём только те инпуты что имеют тип range, меняем writing mode с default на bt-lr, или bottom-to-top и left-to-right, для Edge и Internet Explorer, и добавляем -webkit-appearance: slider-vertical для всех -webkit-based браузеров:

input[type="range"] {
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
}

BCD tables only load in the browser

Стилизация полосы прокрутки HTML5 для разных браузеров

Ползунок — это новый способ ввода информации, введенный в HTML5. Этот способ позволяет ввести число в заданном диапазоне. Браузер стандартно отобразит этот способ ввода информации как полосу прокрутки. Это очень интуитивно понятный пользовательский интерфейс, широко распространенный в приложениях. Мы можем передвигать ручку ползунка вправо или влево, чтобы выбрать число в пределах диапазона.

 

 

Но как Вы можете видеть выше, каждый браузер отображает этот способ ввода информации немного по-своему, что не понравится дизайнерам. Так что в этом уроке мы покажем, как привести полосы прокрутки к одинаковому виду. Давайте начнем.

Рекомендованное чтение: Создание и стилизация индикатора прогресса с использованием HTML5

В браузерах Chrome, Safari и Opera 

Safari и Opera — браузеры Webkit. Хотя Chrome решил использовать свой собственный движок Blink, пока что он все еще наследуют некоторые формы записи от Webkit.

Webkit предоставляет удобный способ стилизации любых форм ввода, включая ползунок. Для начала мы можем выбрать тег input с атрибутом selector и отменить стандартные стили Webkit/Chrome, задав свойству -webkit-appearance значение none.

 

input[type=range] {
    -webkit-appearance: none
}

 

После этого мы можем добавить любые свойства, такие как граница, цвет фона, закругление границы и так далее.

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
} 

 

Как Вы можете видеть ниже, код выше не затронул только ручку ползунка из всего тега input.

Чтобы применить к ней стили, нам нужно использовать собственный псевдоэлемент Webkit  ::-webkit-slider-thumb и таким же способом отменить стандартные стили с помощью -webkit-appearance, следующим образом:

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

 

Так мы зададим стили для ползунка для браузера Webkit. Стили, которые мы задали выше, должны примениться в браузерах Chrome, Safari и в последних версиях браузера Opera. Тем не менее, они не повлияют на браузеры Firefox и Internet Explorer, так как они работают на других движках. Но у нас есть обходные пути для этих двух браузеров.

В браузере Firefox 

Добавление стилей напрямую с  атрибутом selector input [type=’range’]не изменит стандартные стили в браузере Firefox. Вместо этого нам нужно использовать собственные псевдоэлементы браузера Firefox ::-moz-range-track и ::-moz-range-thumb.

Псевдоэлемент ::-moz-range-track повлияет на полосу ползунка, по которой движется ручка, а ::-moz-range-track повлияет на ручку ползунка.

.firefox input[type=range]::-moz-range-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
.firefox input[type=range]::-moz-range-thumb {
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

 

Мы применили те же стили. Откройте браузер Firefox, и Вы увидите практически такой же результат, как и в браузерах Webkit.

В браузере Internet Explorer 

Браузер Internet Explorer отображает полосу прокрутки совсем не так, как остальные браузеры. Чтобы было проще, мы нарисовали изображение, показывающее части, составляющие ползунок.

В браузере Internet Explorer также есть всплывающая подсказка, показывающая число, на котором Вы находитесь, когда Вы передвигаете ручку.

Всем этим частям ползунка можно задать стили с помощью собственных псевдоэлементов браузера Internet Explorer ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip. Здесь мы применим те же стили, что и для браузеров Webkit и Firefox.

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
    background: transparent;
}
input[type="range"]::-ms-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
input[type="range"]::-ms-thumb {
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

 

Но в результате получилось не то, что мы ожидали. Деления видны, а низ и верх ручки ползунка скрыты.

Мы можем легко избавиться от делений, добавив step=»any» тегу input. Тем не менее, мы не можем сделать ручку ползунка полностью видимой. Это как если бы тегу input задали значения свойства overflow как hidden, но это нельзя отменить, просто задав  значения свойства overflow как visible. Это то, с чем мы еще разбираемся.

Заключение 

Ползунки довольно настраиваемы. К сожалению, у каждого браузера собственный способ, и поэтому нам приходится писать больше кода, чем ожидалось. Надеемся, в будущем появится стандарт, регулирующий этот вопрос. И, наконец, вот ссылка на ползунок, который мы показали Вам в этом уроке.

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

Оформление кроссбраузерных элементов input с типом range с помощью CSS

Возможности для стилизации элемента  значительно улучшились с момента выхода версии браузера IE10. Теперь стало возможным создавать кроссбраузерные ползунки выбора диапазона (слайдеры), используя для этого только CSS. В этой обучающей статье мы возьмем стандартный элемент input типа range (Скриншот элемента input с типом range в Mac Chrome 38):

И превратим его вот в такой элемент (Оформление элемента input с типом range с помощью собственных стилей):

Для того чтобы упростить процесс написания кроссбраузерных стилей, мы воспользуемся помощью препроцессора LESS. CSS стили также будут доступны.

Применение базовых CSS стилей

Необходимо применить несколько CSS правил, чтобы изменить отображение элемента input с типом range во всех браузерах.

01.input[type=range] {

02.-webkit-appearance: none; 

03.width: 100%; 

04.}

05. 

06.input[type=range]::-webkit-slider-thumb {

07.-webkit-appearance: none;

08.}

09. 

10.input[type=range]:focus {

11.outline: none; 

12.}

13. 

14.input[type=range]::-ms-track {

15.width: 100%;

16.cursor: pointer;

17.background: transparent; 

18.border-color: transparent;

19.color: transparent;

20.}

В результате мы получим невидимые или нестилизованные элементы input type=»range» во всех браузерах. Теперь мы можем начать добавление собственных стилей.

Оформление ползунка

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

01.

02.input[type=range]::-webkit-slider-thumb {

03.-webkit-appearance: none;

04.border: 1px solid #000000;

05.height: 36px;

06.width: 16px;

07.border-radius: 3px;

08.background: #ffffff;

09.cursor: pointer;

10.margin-top: -14px; 

11.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; 

12.}

13. 

14.

15.input[type=range]::-moz-range-thumb {

16.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

17.border: 1px solid #000000;

18.height: 36px;

19.width: 16px;

20.border-radius: 3px;

21.background: #ffffff;

22.cursor: pointer;

23.}

24. 

25.

26.input[type=range]::-ms-thumb {

27.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

28.border: 1px solid #000000;

29.height: 36px;

30.width: 16px;

31.border-radius: 3px;

32.background: #ffffff;

33.cursor: pointer;

34.}

Обратите внимание на то, что повторение кода является в данном случае необходимым, т.к. мы не можем перечислить эти селекторы через запятую. Браузеры просто проигнорируют весь селектор целиком, если не поймут хотя бы какую-то его часть. Результат будет следующим: (Стилизованный элемент input на невидимой полосе диапазона (WebKit/Blink) или неоформленная полоса диапазона (Firefox и IE))

Оформление полосы диапазона

Линия, вдоль которой перемещается ползунок, называется полосой диапазона. Она также поддается оформлению, как и обычный HTML элемент.

На заметку: браузер Internet Explorer 10+ применяет немного другой подход к представлению элементов input type=»range». В IE вы можете определить совершенно разные стили для верхней (правая часть ползунка) и для нижней (левая часть ползунка) областей полосы диапазона.

А также стоит отметить, что вы можете изменить стили для состояния фокуса, когда пользователь взаимодействует с ползунком выбора диапазона.

01.input[type=range]::-webkit-slider-runnable-track {

02.width: 100%;

03.height: 8.4px;

04.cursor: pointer;

05.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

06.background: #3071a9;

07.border-radius: 1.3px;

08.border: 0.2px solid #010101;

09.}

10. 

11.input[type=range]:focus::-webkit-slider-runnable-track {

12.background: #367ebd;

13.}

14. 

15.input[type=range]::-moz-range-track {

16.width: 100%;

17.height: 8.4px;

18.cursor: pointer;

19.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

20.background: #3071a9;

21.border-radius: 1.3px;

22.border: 0.2px solid #010101;

23.}

24. 

25.input[type=range]::-ms-track {

26.width: 100%;

27.height: 8.4px;

28.cursor: pointer;

29.background: transparent;

30.border-color: transparent;

31.border-width: 16px 0;

32.color: transparent;

33.}

34.input[type=range]::-ms-fill-lower {

35.background: #2a6495;

36.border: 0.2px solid #010101;

37.border-radius: 2.6px;

38.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

39.}

40.input[type=range]:focus::-ms-fill-lower {

41.background: #3071a9;

42.}

43.input[type=range]::-ms-fill-upper {

44.background: #3071a9;

45.border: 0.2px solid #010101;

46.border-radius: 2.6px;

47.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

48.}

49.input[type=range]:focus::-ms-fill-upper {

50.background: #367ebd;

51.}

Этот код дает нам следующий результат (полоса диапазона без ползунка (Chrome) или неоформленный ползунок (Firefox and IE)):

Создание полноценного элемента input с типом range

Теперь, когда мы создали отдельно ползунок и полосу диапазона, мы можем скомпоновать CSS стили вместе, чтобы получить полноценный элемент input с типом range.

Весь CSS код для оформления элементов input с типом range во всех браузерах

Далее приведен весь CSS код, необходимый для оформления элементов input с типом range во всех браузерах.

01.input[type=range] {

02.-webkit-appearance: none;

03.margin: 18px 0;

04.width: 100%;

05.}

06.input[type=range]:focus {

07.outline: none;

08.}

09.input[type=range]::-webkit-slider-runnable-track {

10.width: 100%;

11.height: 8.4px;

12.cursor: pointer;

13.animate: 0.2s;

14.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

15.background: #3071a9;

16.border-radius: 1.3px;

17.border: 0.2px solid #010101;

18.}

19.input[type=range]::-webkit-slider-thumb {

20.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

21.border: 1px solid #000000;

22.height: 36px;

23.width: 16px;

24.border-radius: 3px;

25.background: #ffffff;

26.cursor: pointer;

27.-webkit-appearance: none;

28.margin-top: -14px;

29.}

30.input[type=range]:focus::-webkit-slider-runnable-track {

31.background: #367ebd;

32.}

33.input[type=range]::-moz-range-track {

34.width: 100%;

35.height: 8.4px;

36.cursor: pointer;

37.animate: 0.2s;

38.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

39.background: #3071a9;

40.border-radius: 1.3px;

41.border: 0.2px solid #010101;

42.}

43.input[type=range]::-moz-range-thumb {

44.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

45.border: 1px solid #000000;

46.height: 36px;

47.width: 16px;

48.border-radius: 3px;

49.background: #ffffff;

50.cursor: pointer;

51.}

52.input[type=range]::-ms-track {

53.width: 100%;

54.height: 8.4px;

55.cursor: pointer;

56.animate: 0.2s;

57.background: transparent;

58.border-color: transparent;

59.border-width: 16px 0;

60.color: transparent;

61.}

62.input[type=range]::-ms-fill-lower {

63.background: #2a6495;

64.border: 0.2px solid #010101;

65.border-radius: 2.6px;

66.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

67.}

68.input[type=range]::-ms-fill-upper {

69.background: #3071a9;

70.border: 0.2px solid #010101;

71.border-radius: 2.6px;

72.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

73.}

74.input[type=range]::-ms-thumb {

75.box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;

76.border: 1px solid #000000;

77.height: 36px;

78.width: 16px;

79.border-radius: 3px;

80.background: #ffffff;

81.cursor: pointer;

82.}

83.input[type=range]:focus::-ms-fill-lower {

84.background: #3071a9;

85.}

86.input[type=range]:focus::-ms-fill-upper {

87.background: #367ebd;

88.}

Полноценный элемент input с типом range

После применения стилей у нас получится следующий результат (Элемент input с типом range, созданный полностью с помощью собственных стилей.):


Браузерная поддержка

Сам по себе элемент input type=»range» имеет следующую браузерную поддержку: Firefox 23+, Safari 4+, iOS 5+, Chrome 6+, Opera 11+, IE 10+, Android 4.2+. Это довольно хорошо. Применение собственных стилей для оформления данного элемента не должно по большей части изменить данную браузерную поддержку, если вы будете следовать рекомендациям и коду, написанному в этой обучающей статье.

Вот скриншот демо-примера, иллюстрирующий отображение элемента input с типом range в современных версиях разных браузеров:

Если браузер не поддерживает элемент input type=»range», у вас будет просто отображаться элемент input type=»text», который будет валидным и будет работать.

Полезный инструмент

Возможность для создания кроссбраузерных стилей для элемента input с типом range появилась только в 2014 году, поэтому на данный момент существует не так много инструментов для генерации современных стилей. Инструмент range.css, который я создал, является очень удобным для этих целей.

Как стилизовать диапазон типов ввода в Chrome, Firefox и IE

Синтаксис отличается от поставщика к поставщику, но во всех случаях у вас есть два компонента, которые необходимо стилизовать. Дорожка — это длинный кусок, представляющий диапазон, а ползунок — это выступ, который вы перемещаете, чтобы выбрать значение.

— можно применять стили непосредственно к входу [type = range] , но вы можете столкнуться с проблемами кроссбраузерности. Лучше всего максимально использовать преимущества селекторов дорожек и ползунков, специфичных для конкретных производителей.Мы будем использовать их для воссоздания этого настраиваемого ползунка диапазона.

Браузеры на основе Webkit (Chrome, Safari, Opera)

В браузерах на основе webkit для дорожки используется специальный псевдоселектор :: - webkit-slider-runnable-track , а для большого пальца — :: webkit-slider-thumb .

Пользовательские стили фокуса также можно применить к ползунку и дорожке. Если вы пойдете по этому пути, вам придется удалить стили фокуса по умолчанию для самого ввода.

Попался

Вам нужно указать webkit, что вы не хотите иметь ничего общего с их стилями по умолчанию, включив -webkit-appearance: none; на входе и на большом пальце.

  input [type = range] {
    -webkit-appearance: нет;
}

input [type = range] :: - webkit-slider-runnable-track {
    ширина: 300 пикселей;
    высота: 5 пикселей;
    фон: #ddd;
    граница: нет;
    радиус границы: 3 пикселя;
}

input [type = range] :: - webkit-slider-thumb {
    -webkit-appearance: нет;
    граница: нет;
    высота: 16 пикселей;
    ширина: 16 пикселей;
    радиус границы: 50%;
    фон: золотарник;
    маржа сверху: -4px;
}

input [type = range]: focus {
    наброски: нет;
}

input [type = range]: focus :: - webkit-slider-runnable-track {
    фон: #ccc;
}

Firefox

В Firefox для дорожки используется стиль псевдоселектора :: - moz-range-track , а для ползунка — :: - moz-range-thumb .

Попался

В настоящее время в Firefox есть небольшая ошибка, из-за которой контур : нет. не удаляет стили фокуса. Если у вас сплошной цвет фона, вы можете исправить это, спрятав контур под рамкой.

Вам также необходимо указать input [type = range] той же ширины, что и ваша дорожка. Он не будет расширяться, чтобы содержать трек сам по себе.

  input [type = range] {
    / * исправлена ​​ошибка, из-за которой FF не мог применить стиль фокуса * /
    граница: сплошной белый 1px;

    / * требуется для правильного определения размера дорожки в FF * /
    ширина: 300 пикселей;
}

input [type = range] :: - moz-range-track {
    ширина: 300 пикселей;
    высота: 5 пикселей;
    фон: #ddd;
    граница: нет;
    радиус границы: 3 пикселя;
}

input [type = range] :: - moz-range-thumb {
    граница: нет;
    высота: 16 пикселей;
    ширина: 16 пикселей;
    радиус границы: 50%;
    фон: золотарник;
}

/ * скрыть контур за рамкой * /
input [type = range]: - moz-focusring {
    контур: сплошной белый 1px;
    контур-смещение: -1px;
}

input [type = range]: focus :: - moz-range-track {
    фон: #ccc;
}

Internet Explorer 10 +

Диапазон типов ввода поддерживается в IE10 и выше.Мы можем стилизовать ползунок с помощью псевдо :: - ms-thumb , а дорожку — с помощью :: - ms-track .

Попался

IE не позволит большому пальцу выйти за пределы дорожки, так что вам придется довольствоваться более высокой дорожкой, по крайней мере такой же большой, как большой палец.

Обновление , 15.10.2014 : Большой палец все еще не может переполнить дорожку, но Грэм Фаулер указал на умный обходной путь. Мы можем имитировать достаточно широкую дорожку, добавив толстую прозрачную рамку сверху и снизу дорожки.Мы также переместим большинство наших стилей в :: - ms-fill-lower и :: - ms-fill-upper вместо :: ms-track , чтобы убедиться, что такие вещи, как border-radius рендерить правильно.

Чтобы удалить отметки по умолчанию, вам нужно установить на дорожке цвет: прозрачный .

Бонус

Вы также можете использовать :: - ms-fill-lower и :: - ms-fill-upper для дальнейшей настройки внешнего вида дорожки для любого размера бегунка.Здесь мы улучшили пользовательский интерфейс, придав нижней части более тёмно-серый цвет.

  input [type = range] :: - ms-track {
    ширина: 300 пикселей;
    высота: 5 пикселей;
    
    / * убираем цвет bg с дорожки, вместо этого будем использовать ms-fill-lower и ms-fill-upper * /
    фон: прозрачный;
    
    / * оставляем место для большого пальца, чтобы он мог переполняться прозрачной рамкой * /
    цвет границы: прозрачный;
    ширина границы: 6 пикселей 0;

    / * убираем метки по умолчанию * /
    цвет: прозрачный;
}
input [type = range] :: - ms-fill-lower {
    фон: # 777;
    радиус границы: 10 пикселей;
}
input [type = range] :: - ms-fill-upper {
    фон: #ddd;
    радиус границы: 10 пикселей;
}
input [type = range] :: - ms-thumb {
    граница: нет;
    высота: 16 пикселей;
    ширина: 16 пикселей;
    радиус границы: 50%;
    фон: золотарник;
}
input [type = range]: focus :: - ms-fill-lower {
    фон: # 888;
}
input [type = range]: focus :: - ms-fill-upper {
    фон: #ccc;
}

Вот полный фрагмент кроссбраузерного кода и результат.

html — Как задать стиль input type = «range»

На этот вопрос уже есть ответы :

Закрыт 12 месяцев назад.

Я пытаюсь стилизовать этот элемент. Я никогда не делал этого раньше и не могу найти решение своей проблемы.

Я просто хочу добавить border-radius к краям, добавить box-shadow к этой точке, которая является перетаскиваемой, и основная причина, по которой я спрашиваю, заключается в том, как добавить эту более низкую непрозрачность в сторону, которая еще не выбрано.

Я не знаю, нужно ли это делать с помощью Javascript, или я могу просто сделать это с помощью css, но моя проблема:

Так теперь выглядит мой ассортимент

Моя цель — это

Поскольку я никогда раньше не стилизовал этот элемент, весь этот CSS взят из нескольких статей, которые я нашел в Google.Есть ли что-нибудь для этого, например, фон: активный и фон: неактивный ?

Спасибо.

  .container {
  цвет фона: красный;
  ширина: 30%;
  заполнение: 1em;
  выравнивание текста: центр;
}

input [type = "range"] {
    ширина: 100%;
}

input [type = range] {
    -webkit-appearance: нет;
}

input [type = range] :: - webkit-slider-runnable-track {
    высота: 0,35 мм;
    фон: белый;
    граница: нет;
    радиус границы: 3 пикселя;
}

input [type = range] :: - webkit-slider-thumb {
    -webkit-appearance: нет;
    граница: нет;
    высота: 1.1em;
    ширина: 1.1em;
    радиус границы: 50%;
    фон: белый;
    маржа сверху: -4px;
}

input [type = range]: focus {
    наброски: нет;
}  
  

  

      
 ВЫСОТА 

        

       
 ВЕС

html — Проблемный ползунок ввода диапазона стилей

html — Проблемный ползунок ввода диапазона стилей — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 7к раз

Я пытаюсь сделать базовый стиль во вводе диапазона html следующим образом:

HTML

CSS

  input [type = range] :: - webkit-slider-thumb {
  -webkit-appearance: нет;
  фон: красный;
  высота: 20 пикселей;
  ширина: 20 пикселей;
}

Я также сделал Codepen, на который можно посмотреть.

Вы заметите, что если вы закомментируете стили background , height и width , большой палец исчезнет. Значит, что-то работает. Но с примененными стилями я ожидал, что это будет красный квадрат 20px X 20px . Но, увы, я просто вижу стиль большого пальца по умолчанию.

4

Пожалуйста, сверьтесь с ответом ниже

  input [type = range] {
   -webkit-appearance: нет;
}
input [type = range] :: - webkit-slider-runnable-track {
   ширина: 300 пикселей;
   высота: 5 пикселей;
   фон: #ddd;
   граница: нет;
   радиус границы: 3 пикселя;
}
input [type = range] :: - webkit-slider-thumb {
   -webkit-appearance: нет;
   граница: нет;
   высота: 16 пикселей;
   ширина: 16 пикселей;
   радиус границы: 50%;
   фон: золотарник;
   маржа сверху: -4px;
}
input [type = range]: focus {
   наброски: нет;
}
 input [type = range]: focus :: - webkit-slider-runnable-track {
   фон: #ccc;
}
input [type = range] {
   / * исправлена ​​ошибка, из-за которой FF не мог применить стиль фокуса * /
   граница: сплошной белый 1px;
   / * требуется для правильного определения размера дорожки в FF * /
   ширина: 300 пикселей;
}
 input [type = range] :: - moz-range-track {
   ширина: 300 пикселей;
   высота: 5 пикселей;
   фон: #ddd;
   граница: нет;
   радиус границы: 3 пикселя;
}
 input [type = range] :: - moz-range-thumb {
   граница: нет;
   высота: 16 пикселей;
   ширина: 16 пикселей;
   радиус границы: 50%;
   фон: золотарник;
}

/ * скрыть контур за рамкой * /
input [type = range]: - moz-focusring {
   контур: сплошной белый 1px;
   контур-смещение: -1px;
}
 input [type = range]: focus :: - moz-range-track {
   фон: #ccc;
}

/ * для ie * /

input [type = range] :: - ms-track {
   ширина: 300 пикселей;
   высота: 5 пикселей;

/ * убираем цвет bg с дорожки, вместо этого будем использовать ms-fill-lower и ms-fill-upper * /
   фон: прозрачный;

/ * оставляем место для большого пальца, чтобы он мог переполняться прозрачной рамкой * /
   цвет границы: прозрачный;
   ширина границы: 6 пикселей 0;

/ * убираем метки по умолчанию * /
   цвет: прозрачный;
}
input [type = range] :: - ms-fill-lower {
   фон: # 777;
   радиус границы: 10 пикселей;
}
input [type = range] :: - ms-fill-upper {
   фон: #ddd;
   радиус границы: 10 пикселей;
}
input [type = range] :: - ms-thumb {
   граница: нет;
   высота: 16 пикселей;
   ширина: 16 пикселей;
   радиус границы: 50%;
   фон: золотарник;
}
input [type = range]: focus :: - ms-fill-lower {
   фон: # 888;
}
input [type = range]: focus :: - ms-fill-upper {
   фон: #ccc;
}

alexxlab

Как часто можно делать клизму грудничку: рекомендации педиатров

Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы

Как успокоить плачущего ребенка: 10 эффективных способов

Что нужно новорожденному на первое время: полный список необходимых вещей

Пеленки для новорожденных: виды, размеры и способы использования

Детская кроватка для новорожденного: как правильно выбрать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *