通过 background-size: 10% 100%; 控制active部分
input[type=range]::-webkit-slider-thumb 修改range ball
input[type=range] {
-webkit-appearance:none;
width:160px;
height:4px;
outline:0;
background:none;
background:-webkit-linear-gradient(#2EE3F7, #2EE3F7)no-repeat, #B0B0B0;
background-size: 10% 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none;
position:relative;
height:.20px;
width: 20px;
border:0;
border-radius:50%;
background:url(bg.png)no-repeat;
background-size:100%;
cursor:pointer;
}
网友评论