@ascold2013

Как сделать прозрачный ползунок в input type="range"?

Здравствуйте!
Подскажите - как можно стилизовать ползунок в слайдере, чтобы сам background ползунка был прозрачный (через него должен быть виден фон), а трэк слайдера - видимый? Можно л тут ограничиться css?
Вот что попробовал я сделать:Пример в кодепене
Красный фон - это родительский блок, фон.
Ползунок сделать прозрачным получилось, а вот трек как сделать видимым - теперь проблема.
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 1
@shure348
вот что у меня в записях по этому поводу
//Gecko
::-moz-range-track {}
::-moz-range-thumb {}

//
::-ms-fill-lower: часть полоски, по которой ездит ползунок, под/перед самим ползунком.
::-ms-fill-upper: Часть полоски, по которой ездит ползунок, над/после самого ползунка.
::-ms-ticks-before: Область над/перед полоской ползунка с делениями.
::-ms-ticks-after: Область под/после полоски ползунка с делениями.
::-ms-thumb: Сам ползунок
::-ms-track: Полоска ползунка
::ms-tooltip: Всплывающая подсказка, которая появляется во время того, как пользователь выбирает значение в селекторе ползунка. Заметьте, что этот элемент не может быть стилизован, а только скрыт при помощи display: none. :)

//webkit
::-webkit-slider-runnable-track для полоски 
::-webkit-slider-thumb для самого ползунка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Soft Media Int. Пенза
от 125 000 до 225 000 руб.
15 авг. 2018, в 23:38
300 руб./за проект
15 авг. 2018, в 22:39
60000 руб./за проект
15 авг. 2018, в 21:18
30000 руб./за проект