
Как видно, каждый браузер отображает этот элемент ввода слегка по-своему, и это может не устраивать некоторых дотошных дизайнеров. Так что, в нашей сегодняшней статье мы хотим показать вам, как можно оформить этот слайдер так, как нужно именно вам. Если вы готовы, давайте просто приступим.
В Chrome, Safari и Opera
Safari и Opera относятся к семейству браузеров Webkit. Однако в Chrome решили создать собственный движок, Blink, и, что стоит отметить, Chrome сумел унаследовать несколько кодовых баз из веб-сайтов.
Webkit предоставляет простой способ стилизовать любой тип ввода, включая и range. Для начала мы можем выбрать поле ввода при помощи селектора атрибутов и убрать нативные стили 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;
}
Как можно видеть ниже, ползунок – это единственная часть поля ввода, которая не была подвержена изменениям от вышеприведенного кода.

Чтобы применить к нему стили, мы использовали Webkit соответствующий селектор псевдо-элементов ::-webkit-slider-thumband, чтобы исключить нативные стили в -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;
}
И вот как мы стилизуем тип ввода range в Webkit-браузере. Стиль, который мы добавили выше, должен оказать влияние в Chrome, Safari, а также в последней версии Opera. Однако, он не подействует на Firefox и Internet Explorer, так как они работают на других движках. Но для этого у нас есть обходные пути.
В Firefox
Применение стилей при помощи селектора атрибутов input[type='range'] не изменить нативных стилей поля ввода в Firefox. Вместо этого, нам нужно использовать соответствующий Firefox селектор псевдо-элементов ::-moz-range-track и ::-moz-range-thumb.
.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 отображает тип ввода range немного по-другому, нежели остальные. Чтобы облегчить все это, мы привели диаграмму, отображающую фрагменты, формирующие поле ввода.

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

Каждый элемент этого ввода можно оформить посредством соответствующего IE псевдо-элемента ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-tick и ::-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” в элемент ввода. Однако вряд ли мы сможем сделать рукоятку полностью видимой. Так как параметр overflow у элемента ввода выставлен на hidden, и эту проблему нельзя решить просто выставив overflow на visible. Причину этого мы пытаемся выяснить до сих пор. Если вам удастся решить этот вопрос, пожалуйста, поделитесь с нами в комментариях.

В завершение
Элемент ввода range позволяет изменять и внешний вид. К сожалению, каждый браузер по-своему интерпретирует вводимые вами стили, и поэтому вам скорее всего придется использовать больший объем кода. Мы надеемся, что вскоре появится какой-то строгий стандарт для всех. Наконец, предлагаем вам ссылку, по которой вы сможете увидеть этот пример в действии.
Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.