时间戳

首页 > 解决方案 > 我正在尝试设置范围输入的拇指样式，但 webkit 不起作用

html - 我正在尝试设置范围输入的拇指样式，但 webkit 不起作用

问题描述

好吧，我正在尝试在 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 中打开以查看问题的 jfiddle

标签： htmlcsssass

解决方案

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

对 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/

我希望这对你有用。

谢谢

推荐阅读