Question

我在范围滑块上有自定义输入拇指，我希望它在更改为“禁用”时更改颜色

我试图像这样将类添加到拇指

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;
}

“已禁用”类应放在input [type = range]之后，然后它将起作用

Answer 2

Write like this and magic started:
`
   input[type="range"]:disabled::-webkit-slider-thumb {
         opacity: 0.6 !important;
         cursor: context-menu !important;
   }
   input[type="range"]:disabled::-moz-range-thumb {
        opacity: 0.6 !important;
        cursor: context-menu !important;
    }

    input[type="range"]:disabled::-ms-thumb {
        opacity: 0.6 !important;
        cursor: context-menu !important;
    }
`

在禁用的输入上更改自定义输入范围拇指的背景颜色

2 个答案: