这段必须要加上,清除默认样式,根据mdn文档介绍,这个样式兼容性不太好,应该多看看目标用户的浏览器支不支持。
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
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);}}