版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_39072332/article/details/88175913
有时候我们需要修改浏览器的原始滑动条样式,并针对不同浏览器兼容,首先来看一下不同的浏览器的原始滑动条:
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>