纯CSS方法：给input range整容

马黑黑 · 发表于 2022-11-26 10:42

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-11-26 13:34 编辑

input是一个集成式标签，当type="rnage"时，它是一个滑动条，属HTML5的一个新对象。试看：

上面效果的代码：

<input type="range" value="30" />

不同浏览器（包括内核和版本）下，range的默认样式会不一样，在IE下是最难看（IE9 以上才支持range），其他非IE的浏览器下会好看一些，但也好不了多少。所以，input[type=range]是要整容的，请把它送去韩国——哎呀，兜里钢镚好像没多少个呢，算了，自己动CSS杀猪刀吧。

第一步：扒皮。就是，把range的皮剥掉。根据浏览器文档，Firefox和chromium都提供一个实验性属性，appearance，外观，通过对它的设置，可以给range蜕皮。因为是实验性质的，需要前缀，Firefox用 -moz-，chromium用-webkit-，现在Firefox支持部分-webkit- 前缀，包括这个 -webkit-appearance，所以，我们给这个range滑动条剥皮的方法是：

-webkit-appearance: none;

看看有木有效果：

嗯，轨迹不见了，只剩下一个滑块（这个滑块不同浏览器下是不一样的）。我们是用range来做进度条的，得有。整容嘛，就是把不好看的切掉，然后装上新的。chromium提供一个轨道设置方法，slider-runnable-track，同样是实验性的东东：

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

height: 2px;

background: olive;

}

这个，其实是利用了浏览器内置的一个伪元素的方法来对滑道进行修饰，它还是遵循CSS的相关规范的。不过，这个 slider-runnable-track 在Firefox那里内置的名称不一样，它是 range-track，为了兼容可爱的火狐狸，我们得加一组CSS代码：

input[type=range]::-moz-range-track {

height: 2px;

background: olive;

}

OK，看看效果：

咦，滑块怎么跑到底部了？没关系，我们的杀猪刀很利，对这个小滑块同样可以整容。chromium提供一个slider-thumb，说的就是滑块，我们对它这么干：

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

-webkit-appearance: none;

position: relative;

width: 20px;

height: 20px;

border: 4px solid hsla(100,10%,80%,.95);

border-radius: 50%;

background: olive;

top: calc(50% - 10px);

cursor: pointer;

}

上面代码，先割掉range原装滑块，然后给它定义宽高尺寸、形状、边框、背景颜色、鼠标指针等，最重要的是红色部分的代码，chromium需要设置position为relative，否则下面的top值将不能生效，就无法将滑块上移。Firefox新版则可以不需要定义滑块的position属性、也不需要设置top值，就是说滑块在Firefox中是垂直居中的。但它的滑块名称不同，它提供的是range-thumb，所以加一组代码以适配Firefox：

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

-webkit-appearance: none;

width: 12px;

height: 12px;

border: 4px solid hsla(100,10%,80%,.75);

border-radius: 50%;

background: olive;

cursor: pointer;

}

Firefox还支持定义进度条已加载部分的颜色，名称为range-progress，代码如下：

input[type=range]::-moz-range-progress {

background: red;