Стилизация диапазона ввода для веб-кита с помощью чистого CSS ⇐ Html

[Anonymous]

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


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

Код: Выделить всё

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
width: 20px;
border-radius: 10px;
background: red;
cursor: pointer;
border: none;
margin-top: -8px;
}

input[type=range] {
-webkit-appearance: none;
outline: 0;
margin: 0;
padding: 0;
height: 30px;
width: 100%;
}

Код: Выделить всё

Может ли кто-нибудь предложить мне изменить цвет фона выбранной бегущей дорожки?

Подробнее здесь: https://stackoverflow.com/questions/348 ... h-pure-css