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='range']::-moz-range-track{

background-color: #eee;

}

而 IE 则相对而言复杂些：

感谢 @ Thoriq Firdaus 提供的草图 说明 IE 支持的伪类。

IE 默认是添加了 tick 进行分割，你需要设置 color 来实现颜色的控制。

input[type="range"]::-ms-track{

color:transparent;

background-color: #eee;

}

设置控制的拖拽按钮样式

firefox 和 chrome ，safari这些浏览器可以设置 thumb 伪类来实现

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

-webkit-appearance: none;

border: 5px solid #fff;

height: 14px;

width: 14px;

border-radius: 8px;

background: #1ba1e2;

cursor: pointer;

}

input[type='range']::-moz-range-thumb {

border: 3px solid #fff;

height: 7px;

width: 7px;

border-radius: 8px;

background: #1ba1e2;

cursor: pointer;

}

而 IE 则需要设置伪类 ::-ms-thumb :

input[type='range']::-ms-thumb {

border: 3px solid #fff;

height: 7px;

width: 7px;

border-radius: 8px;

background: #1ba1e2;

cursor: pointer;

}

效果图如下：

设置垂直的控制条

除了常见的水平的控制条外，我们还可以设置垂直的滚动条，无疑就是使用 transform 来设置旋转的角度：

width: 250px;

height: 5px;

margin: 0;

transform-origin: 75px 75px;

transform: rotate(-90deg);

高亮选中区域

我们需要区分已经加载的部分和没有加载的部分。实际上我们可以通过设置渐变来实现:

.gradient::-webkit-slider-runnable-track{

background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee);

}

.gradient::-moz-range-track{

background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee);

}

.gradient::-ms-fill-lower{

background:linear-gradient(to right, #1ab1e2 0%, #1ab1e2 80%,#eee 80%, #eee);

}

除了渐变实际上我们还可以通过一些 JS 和一组 div 来实现控制:

大概思路就是通过设置一个 透明的 input range，然后底部通过一个 div 来实现高亮的百分比显示。

扩展阅读