input[type="range"]是html5中的input标签新属性,样子如下: 如果想让此滑块效果如下图所示,怎么做呢? 以下是样式部分: <br /> input[type="range"] { <br /> -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; <br /> margin-top: 2px; <br /> background-color: #272728; <br /> border-radius: 15px; <br /> width: 400px; <br /> -webkit-appearance: none; <br /> height: 10px; <br /> } <br /> input[type="range"]::-webkit-slider-thumb { <br /> -webkit-appearance: none; <br /> cursor: default; <br /> top: -5px; <br /> height: 30px; <br /> width: 20px; <br /> transform: translateY(-4px); <br /> background: none repeat scroll 0 0 #777; <br /> border-radius: 15px; <br /> -webkit-box-shadow: 0 -1px 1px black inset; <br /> } <br />