input[type="range"] { /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/ /*margin-top: 2px;*/ background-color: rgba(76, 175, 80, 0.86); border-radius: 30px; width: 4rem; -webkit-appearance: none; height:0.3rem; border: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; cursor: default; top: 0.2rem; height: 0.5rem; width: 0.5rem; transform: translateY(0rem); background: none repeat scroll 0 0 #4CAF50; border-radius: 100%; border: none; /*-webkit-box-shadow: 0 -1px 1px black inset;*/ }
<input class="rangeInput" type="range" min="1" max="10" step="1" value="1" />
图片效果: