自定义滑动条input[type="range"]样式

有时候我们需要修改浏览器的原始滑动条样式，并针对不同浏览器兼容，首先来看一下不同的浏览器的原始滑动条：

chrome：

firefox：

IE：

下面是我们要达到的效果：

chrome、firefox： IE：

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="range"] {
            -webkit-appearance: none; /* 去除默认样式 */
            background: -webkit-linear-gradient(#2e9cfb, #2e9cfb) no-repeat, #606060;
            background-size: 0 100%;
            width: 200px;
            height: 10px;
            border-radius: 15px;
            
        }

        /* 去除获取焦点时的边框 */
        input[type="range"]:focus {
            outline: none;
        }

        /* chrome自定义滑动轨道 */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 10px;
            border-radius: 15px;
        }

        /* chrome自定义滑块 */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 10px;
            height: 20px;
            background: rgb(241, 241, 241);
            border-radius: 0 0 5px 5px;
            transform: translateY(-5px);
        }

        /* firefox自定义滑动轨道 */
        input[type="range"]::-moz-range-track {
            background: #606060;
            height: 10px;
            border-radius: 15px;
        }

        /* firefox自定义滑块 */
        input[type="range"]::-moz-range-thumb {
            width: 10px;
            height: 20px;
            background: rgb(241, 241, 241);
            border-radius: 0 0 5px 5px;
        }

        /* firefox根据滑块位置填充进度条 */
        input[type="range"]::-moz-range-progress {
            height: 10px;
            background: #2e9cfb;
            border-radius: 15px;
        }

        /* IE自定义滑动轨道 */
        input[type="range"]::-ms-track {
            height: 10px;
            border-color: transparent; /* 去掉原有边框 */
            color: transparent; /* 去掉轨道内的竖线 */
            border-radius: 15px;
            background: #606060;
        }


        /* IE自定义滑块 */
        input[type="range"]::-ms-thumb {
            height: 20px; /* 不生效，IE下滑块最高高度与滚动条一致 */
            width: 10px;
            background: rgb(241, 241, 241);
        }

        input[type=range]::-ms-fill-lower { /*进度条已填充的部分*/
            background: #2e9cfb;
        }

        input[type=range]::-ms-fill-upper { /*进度条未填充的部分*/
            background: #606060;
        }
    </style>
</head>

<body>
    <div>
        <input id="range" type="range" max="100" min="0" value="0">
    </div>
</body>
<script>
    // 谷歌通过js修改填充进度条颜色
    var range = document.getElementById("range");
    range.onmousemove = function () {
        range.style.backgroundSize = range.value + '% 100%';
    }
</script>

</html>

自定义滑动条input[type="range"]样式

猜你喜欢