使用图实现CSS更改范围图标

Question

我可以从实现中更改图标“范围滑块”吗？

谢谢

Answer 1

如果您更深入地研究 materialize.css 文件，那么您会发现，在编辑其中的一些内容后，您可以自定义滑块。

在范围滑块上检查W3Schools文档，您可以通过更改- border，height，width，border-radius等。不要忘记在!important的帮助下覆盖它们。

input[type=range]::-webkit-slider-thumb {
        border: 1px solid #000;
        height: 20px;
        width: 20px;
        border-radius: 25% !important;
        background: #4826a6 !important;
        -webkit-transition: -webkit-box-shadow .3s;
        transition: -webkit-box-shadow .3s;
        transition: box-shadow .3s;
        transition: box-shadow .3s, -webkit-box-shadow .3s;
        -webkit-appearance: none;
        background-color: #26a69a;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        margin: -10px 0 0 0;
    }

自定义范围滑块

How to create Range Sliders - W3Schools