css - 在禁用的输入上更改自定义输入范围缩略图背景颜色

Question

我的范围 slider 上有自定义输入拇指，我希望它在更改为禁用时改变颜色

我试过像这样给 thumb 添加类

input[type=range]::-webkit-slider-thumb.disabled

还尝试添加禁用指令

input[type=range]::-webkit-slider-thumb:disabled

这些都不起作用。

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #ffffff;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  background: linear-gradient(#FF6C2C,#FF2626);
  margin-top: -9px;
  z-index: 4;
}

我希望它与此类似:

input[type=range]::-webkit-slider-thumb:disabled {
  background: #CCCCCC;
}

有什么办法可以做到吗？我不允许使用 jquery。

Answer 1

没关系，我终于找到了解决方案，它应该是这样的:

input[type=range].disabled::-webkit-slider-thumb{
  background: #CCCCCC;
}

“disabled”类应该在 input[type=range] 之后，然后它才会起作用