【html5】html5中input 标签 type值为range时，修改其默认css

 

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type="range"] {
            -webkit-appearance: none; /* 去除默认样式 */
            background: -webkit-linear-gradient(red, red) no-repeat, #dedede;
            background-size: 0 100%;
            width: 200px;
            height: 2px;
            border-radius: 15px;
            
        }
 
        /* 去除获取焦点时的边框 */
        input[type="range"]:focus {
            outline: none;
        }
 
        /* chrome自定义滑动轨道 */
        input[type="range"]::-webkit-slider-runnable-track {
            height: 2px;
            border-radius: 15px;
        }
 
        /* chrome自定义滑块 */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            position:relative;
            top:-4px;
            width: 12px;
            height: 12px;
            border:1px solid red;
            background: #fff;
            border-radius: 50%;

        }
 
        /* firefox自定义滑动轨道 */
        input[type="range"]::-moz-range-track {
            background: #dedede;
            height: 2px;
        }
 
        /* firefox自定义滑块 */
        input[type="range"]::-moz-range-thumb {
            position:relative;
            top:-4px;
            width: 12px;
            height: 12px;
            border:1px solid red;
            background: #fff;
            border-radius: 50%;
        }
 
        /* firefox根据滑块位置填充进度条 */
        input[type="range"]::-moz-range-progress {
            height: 2px;
            background: red;
        }
 
        /* IE自定义滑动轨道 */
        input[type="range"]::-ms-track {
            height: 2px;
            border-color: transparent; /* 去掉原有边框 */
            color: transparent; /* 去掉轨道内的竖线 */
            border-radius: 15px;
            background: #dedede;
        }
 
 
        /* IE自定义滑块 */
        input[type="range"]::-ms-thumb {
            position:relative;
            top:-4px;
            width: 12px;
            height: 12px;
            border:1px solid red;
            background: #fff;
            border-radius: 50%;
        }
 
        input[type=range]::-ms-fill-lower { /*进度条已填充的部分*/
            background: red;
        }
 
        input[type=range]::-ms-fill-upper { /*进度条未填充的部分*/
            background: #dedede;
        }
    </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>

效果图

 

 

 

 

 

 

posted on 2022-08-12 17:14  smile轉角  阅读(138)  评论(0)    收藏  举报

导航