如何使用 CSS 和 Webkit 自定义滑块拇指形状？答案

【问题标题】：How to customise slider thumb's shape with CSS and Webkit?如何使用 CSS 和 Webkit 自定义滑块拇指形状？
【发布时间】：2022-11-02 13:37:40
【问题描述】：

我知道如何使用 CSS 和 Webkit 自定义滑块的某些属性。例如。：

#slider::-webkit-slider-thumb{
    box-shadow: 0px 0px 0px #000000;
    border-radius: 50%;
    border: 3px solid #0ac2ac;
    background: #0ac2ac;
    cursor: pointer;
    -webkit-appearance: none;
    cursor: grabbing;
    height: 15px;
    width: 15px;
}

相反，我不知道并且未能在网上找到如何使用 CSS 和 Webkit 自定义滑块拇指的形状.

我希望使用多边形而不是滑块拇指的默认圆形。

有没有办法通过使用 CSS 和 Webkit 来做到这一点？如果不是，实现我的目的最有效的替代解决方案是什么？

谢谢！

【问题讨论】：

你好，你找到答案了吗？我有同样的任务。使它成为矩形 :D 愚蠢的老板。

标签： css graphics frontend slider webkit

【解决方案1】：

这个https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

这对我有帮助：enter link description here

您必须知道的一件事是您必须先隐藏原始元素，否则它不会更新/覆盖。我成功地更改了设计，但未能在滑块的“剩余”部分添加白条。针对 DOM 的 background-size:60% 100% 对我不起作用。

【讨论】：

【解决方案2】：

我通过添加clip-path: polygon(<path>) 并将background: <colour> 更改为background: url("<entire svg code>") 来解决它，使其成为我的问题中显示的样式。

【讨论】：