html - 更改范围 slider 的颜色

Question

我是网络编程的新手，所以这个问题对你们大多数人来说看起来很简单。

我有 3 个范围 slider ，我想为每个 slider 设置不同的颜色(红色、绿色和蓝色)，那么设置颜色的最佳方法是什么。通过 id 或任何其他方式在负载上使用 body？

演示在这里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 和::-webkit-slider-thumb 这个属性的 css。

属性中有box-shadow。

试着把它放在下面。

盒子阴影:-100vw 0 0 100vw #007aff;

#007aff 是蓝色的，但如果您将它与您的 ID 一起使用，那么您可以将 slider 更改为您想要的颜色。

你的 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 */
}