如何给两个范围滑块不同的轨道颜色？答案

【问题标题】：How do I give two range sliders a different track-color?如何给两个范围滑块不同的轨道颜色？
【发布时间】：2019-11-06 09:37:07
【问题描述】：

有人可以向我解释如何使这两个滑块轨道具有不同的颜色吗？

非常感谢，因为我正在为一些看似“简单”的事情而烦恼（如果我错了，请道歉）

input[type=range]::-webkit-slider-runnable-track{
  background-color:red;
}

<input type="range">
'
'
'
<input type="range">

【问题讨论】：

标签： html css input slider range

【解决方案1】：

您可以为输入元素分配不同的类并赋予各自的背景颜色。请参考下面的sn-p。

input[type=range].bgRed::-webkit-slider-runnable-track{
  background-color:red;
}
input[type=range].bgBlue::-webkit-slider-runnable-track{
  background-color:blue;
}

<input type="range" class="bgRed">
'
'
'
<input type="range" class="bgBlue">

输出：

【讨论】：

我知道我们不应该说谢谢，但我有点反叛和暴徒所以；谢谢你！ =)

【解决方案2】：

试试这个 CSS

input[type=range]:nth-child(1)::-webkit-slider-runnable-track{
  background-color:red;
}
input[type=range]:nth-child(2)::-webkit-slider-runnable-track{
  background-color:green;
}

输出

【讨论】：