От автора: Ползунок выбора диапазона (range) является одним из новых типов у элемента input, представленных в спецификации HTML5. Данный тип позволяет осуществить выбор какого-то числового значения в указанном диапазоне. Браузерами предусмотрено отображение данного типа в виде слайдера с ползунком. Это очень интуитивный элемент пользовательского интерфейса, который очень часто встречается в приложениях. Мы можем передвигать ползунок вправо или влево, чтобы выбрать нужное значение в рамках заданного диапазона.
Но, как вы могли заметить, в каждом браузере предусмотрено свое, немного отличающееся от остальных браузеров, оформление, которое может не устроить некоторых дизайнеров и разработчиков. Поэтому в этой статье я покажу вам, как создать для данного элемента почти одинаковое оформление для всех браузеров. Итак, если вы готовы, давайте начнем.
Рекомендую также прочитать статью: Создание и оформление HTML5 индикатора выполнения (progress bar)
Для браузеров Chrome, Safari и Opera
Браузеры Safari и Opera работают на «движке» Webkit. И хотя разработчики браузера Chrome приняли решение перейти на собственный «движок» Blink, на данный момент у данных браузеров много общего.
Webkit предоставляет легкий способ стилизовать любой тип элемента input, включая range. Для начала мы можем выбрать нужный элемент input с помощью селектора атрибутов и отключить стили, заданные по умолчанию в Webkit/Chrome, указав значение none для свойства -webkit-appearance.
|
1 2 3 |
input[type=range] { -webkit-appearance: none } |
После этого мы можем задавать все, что угодно, например, границы, цвет фона, скругление углов и т.д.
|
1 2 3 4 5 6 7 8 |
.input[type=range] { -webkit-appearance: none; width: 100%; border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } |
На следующем примере видно, что только ползунок (handlebar) остался незатронутым в результате указания стилей.
Чтобы и к нему тоже можно было применять стили, нам необходимо использовать псевдо-элемент ::-webkit-slider-thumb, имеющийся только у Webkit, и точно также удалить исходные стили с помощью свойства -webkit-appearance. Вот так:
|
1 2 3 4 5 6 7 8 9 |
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; } |
Таким способом мы можем стилизовать элемент input с типом range для браузеров на «движке» Webkit. Стили, которые мы прописали, должны работать для браузеров Chrome и Safari, а также для последней версии Opera. Однако, они не окажут никакого эффекта в браузерах Firefox и Internet Explorer, т.к. у них другие «движки». Но мы знаем, что нужно делать, чтобы исправить эту ситуацию.
Для браузера Firefox
Попытка прописать стили прямо для селектора input[type=’range’] окажется неудачной в случае с Firefox. Вместо этого нам необходимо использовать псевдо-элементы ::-moz-range-track и ::-moz-range-thumb, характерные только для Firefox.
Псевдо-элемент ::-moz-range-track позволит изменить полосу диапазона, а псевдо-элемент ::-moz-range-thumb — ползунок.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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 отображает элемент input с типом range далеко не так, как все остальные браузеры. Чтобы было легче понять, я нарисовал диаграмму, показывающую из каких частей формируется элемент input данного типа.
(Прим. пер.: lower fill – нижняя заливка, tick – отметка, handle bar – ползунок, upper fill – верхняя заливка)
IE также отображает всплывающую подсказку (tooltip), отображающую устанавливаемое значение во время перемещения ползунка.
Каждую из этих частей элемента input мы можем оформить с помощью псевдо-элементов ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip, имеющихся только в IE. Здесь мы будем использовать те же стили, как и для браузера Firefox и браузеров на «движке» Webkit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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; } |
Но в результате получится не то, что мы ожидали увидеть. Отметки будут видны, а вот верх и низ ползунка – нет.
Мы легко можем убрать отметки, добавив для элемента input параметр step=»any». Однако, сделать ползунок полностью видимым не представляется возможным. Это, как если бы для элемента input было задано свойство overflow со значением hidden, но это нельзя было бы исправить, изменив значение свойства overflow на visible. Я до сих пор пытаюсь выяснить, почему так происходит. Если вам удалось решить эту проблему, поделитесь, пожалуйста, своим решением в комментариях.
В заключение
В заключение хотелось бы сказать, что элемент input с типом range — это довольно хорошо изменяемый элемент. К сожалению, каждый браузер стремится отобразить его по-своему, поэтому нам приходится писать больше кода, чтобы это исправить. Я надеюсь, что в будущем появится стандарт, который сгладит данные различия. Я также даю ссылку на демо-пример ползунка выбора диапазона, созданного в данной статье, и ссылку на исходники.
Автор: Thoriq Firdaus
Источник: //www.hongkiat.com/
Редакция: Команда webformyself.
