这段必须要加上,清除默认样式 ,根据mdn文档介绍,这个样式兼容性不太好,应该多看看目标用户的浏览器支不支持。
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
css
input[type='range']{-webkit-appearance: none;
width:90px;
height:5px;
background:#303130;
border-radius:4px;
transform:rotate(90deg);
transform-origin:100% 0%;}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width:50px;
height:5px;
background:linear-gradient(to right,#c1a068,#967a54);
cursor:pointer;
border-radius:3px;
&:hover{background:linear-gradient(to right,#ccb58e,#967a54);}
&:active{background:linear-gradient(to right,#967a54,#967a54);}
}