第一种：伪对象选择器
在webkit内核的浏览器里可以定义滚动条样式。在CSS初始处定义
第二种：变相隐藏
大体思路是在div外面再套一个div。这个div设置overflow:hidden。
而内容div设置 overflow-x: hiddenoverflow-y: scroll然后再设置外层div的width小于内容div的width，就是用一个无滚动条的div包裹另一个有滚动条的div，从而实现隐藏滚动条的效果。
你最好使用滑块插件了。建议你看下这篇文章，能很好地解决你的问题-可以滑动滑块时实时显示数字。网页链接 是基于bootstrap里的一个slider插件，很好用。这篇有详细介绍，并且最下方有demo演示以及详细的API地址。
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/> $('#ex1').slider({formatter: function(value) {
return 'Current value: ' + value
}
})
// Without JQuery
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value
}
})
