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/的jfidle 在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/

我希望对您有用。

谢谢

我正在尝试设置范围输入的缩略图样式，但Webkit无法正常工作

1 个答案: