我正在尝试设置范围输入的拇指样式，但网络套件不起作用

Question

好吧，我正在尝试在chrome中设置范围拇指的样式，但是我的代码无法以任何方式工作，我不知道为什么：

html 
<input type="range" min="0" max="38" value="20" class="slider" id="slider">

sass:
&::-webkit-slider-thumb
background-color: #000000
clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
height: 100%
width: 50%
padding: 0
opacity: 0.8
&:hover
opacity: 1 

这是所有代码 https://jsfiddle.net/81x7v4tn/在 Chrome 中打开以查看问题

Answer 1

问题是您尚未消除滑块拇指的默认外观。因此，如果设置了默认外观，则不会实现自定义样式。

对 SASS 所做的更改：

&::-webkit-slider-thumb
-webkit-appearance: none
appearance: none
background-color: #000000
//clip-path: polygon(0 46%, 100% 45%, 100% 60%, 0 61%)
height: 100%
width: 50%
padding: 0
cursor: pointer
opacity: 1

工作小提琴：-https://jsfiddle.net/5pe42ron/

我希望这对你有用。

谢谢