使用 Img Materialize 更改范围图标 CSS

Question

我可以从 Materialise 更改图标范围滑块吗？

谢谢

Answer 1

如果你深入研究 materialize.css 文件，你会发现这个，从中编辑一些东西你可以自定义滑块。

查看 Range sliders 上的 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

使用 Img Materialize 更改范围图标 CSS

Change Range Icon with Img Materialize CSS

html

css

range

materialize