Question

我是网络编程的新手，因此对于大多数人来说，这个问题看起来很简单。

我有3个范围滑块，我想为每个滑块设置不同的颜色（红色，绿色和蓝色），那么设置颜色的最佳方法是什么。通过id或其他任何方式使用加载对象？

演示在这里https://codepen.io/fast7027/pen/zXLOem

<div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeR">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeG">
                        </div>
                        <div class="btn-row">
                          <input type="range" min="0" max="100" value="65" id="rangeB">
                        </div>

Answer 1

我将使用具有id的CSS和::-webkit-slider-thumb此属性。

该属性中有一个盒子阴影。

请尝试将其放在下面。

盒子阴影：-100vw 0 0 100vw＃007aff;

＃007aff是蓝色的，但是如果您将其与ID一起使用，则可以更改滑块所需的颜色。

css中的示例

#rangeR::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Red;
}
#rangeG::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Green;
}
#rangeB::-webkit-slider-thumb   {
  box-shadow: -100vw 0 0 100vw Blue;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; /* 1 */
    height: 20px;
    background: #fff;
    border: 2px solid #999; /* 1 */
}

更改范围滑块的颜色

1 个答案: