html range 样式,美化 input range 控制条

平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。

默认的效果如图:

你可以设置它的值得范围(min, max) 以及它的步长(step)。

这里的重点是设置它的样式啦:

取消掉默认的样式

在 chrome 和 safari 下我们可以通过声明:

-webkit-appearance: none;

取消掉默认的样式，这时候效果如图:

这个时候我们可以设置它的 border 或者 background 等信息。

如果是 chrome 或者 safari 浏览器，以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式;

input[type='range']::-webkit-slider-runnable-track{

background-color: #eee;

}

而 firefox 则需要使用 ::-moz-range-track:

input[type&#