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>
效果图
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。