input range 修改样式

通过 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;

}