如何利用CSS来美化滑动输入条（input range）？下面本篇文章给大家介绍一下利用纯 CSS 自定义滑动输入条样式的方法，希望对大家有所帮助！
关于原生 input range 滑动输入条如何自定义样式一直都是我心里的一道坎，一般情况下，可以很轻易的美化到这个程度。
为什么很容易呢？因为这些都是有对应的伪元素可以修改的
::-webkit-slider-container{/*可以修改容器的若干样式*/}::-webkit-slider-runnable-track{/*可以修改轨道的若干样式*/}::-webkit-slider-thumb{/*可以修改滑块的若干样式*/}
可是，偏偏没有已滑过部分的样式，如果要定义下面这样的样式，单纯的 CSS 可能没办法实现了
注意：Firefox 有单独的伪类可以修改，本文讨论的是 Chrome 实现方案
一、我的实现思路
既然没有专门的伪元素可以修改已滑过部分的颜色，而且只有滑块是可动的，是不是可以在滑块上下手呢？
假设滑块左边有一个矩形，是跟随滑块一起的，
当这个矩形足够长时，能够完全覆盖左边的轨道，在可视范围内，是不是就可以表示左边的已滑过部分了呢？示意如下（左边半透明表示滑动条之外）
尝试过伪元素的想法，像这样
::-webkit-slider-thumb::after{/*本想绘制一个足够长的矩形*/}
可惜，伪元素里并不能再次生成伪元素。
所以，如何在元素之外绘制一个矩形呢？
二、通过 border-image 在元素之外绘制图形
有哪些方式可以在元素之外绘制图形呢？想了一下，有box-shadow和outline，但是好像并不适合这种情况，我们需要绘制的是一个尺寸可控的矩形，而这两种方式都不能很好地控制形状。那还有其他方式吗？
还真有！前两天刚看到张鑫旭老师的一篇文章：被低估的border-image属性，其中有一个特性就是在元素之外构建图像，并且不占据任何空间。赶紧试试，这里绘制一个宽度为99vw的矩形（足够覆盖滑动条就行了），代码如下
::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background-color:#f44336;border:1pxsolidtransparent;margin-top:-8px;border-image:linear-gradient(#f44336,#f44336)0fill/82080/00099vw;/*绘制元素外矩形*/}
效果如下
注意几点：
border-image 要想生效，必须指定border，这里设置的是border: 1px solid transparent;
矩形是通过线性渐变绘制的linear-gradient(#f44336,#f44336)
border-image 中8 20 8 0表示border-image-width，距离上、右、下、左的距离，由于滑块自身大小是 20 * 20，所以这个可以确定高度是 4 (20 – 8- 8)，位置是滑块自身的最左边（距离右边是20）
border-image 中0 0 0 99vw表示border-image-outset扩展大小，这里指的是向左扩展99vw的距离
接下来通过overflow:hidden隐藏外面的部分就可以了
::-webkit-slider-container{/*其他样式*/overflow:hidden;}
完整代码可以访问：input range
https://codepen.io/xboxyan/pen/YzERZyE
下面附上完整代码（最近codepen貌似不太稳定）
[type="range"]{-webkit-appearance:none;appearance:none;margin:0;outline:0;background-color:transparent;width:500px;}[type="range"]::-webkit-slider-runnable-track{height:4px;background:#eee;}[type="range"i]::-webkit-slider-container{height:20px;overflow:hidden;}[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background-color:#f44336;border:1pxsolidtransparent;margin-top:-8px;border-image:linear-gradient(#f44336,#f44336)0fill/82080/0px0px02000px;}
三、还是有一些局限
上面的实现成本其实是很低的，相比常规的实现基础上，仅仅增加了1行用于绘制元素之外的矩形。
如果还有好的想法欢迎留言讨论
四、简单总结一下
关于border-image-outset这个属性，其实之前已经在MDN上见识过了，但只是简单了解，还觉得很鸡肋，现在看来，这些属性不是没什么用，只是没有碰到适合应用的场景。下面简单总结一下：
滑动条有 3 个伪元素可以自定义容器、轨道、滑块
伪元素里不能再嵌套伪元素了
元素之外绘制有 box-shadow、outline、border-image 3种方法
border-image 可以使用任意格式图片，包括 CSS 渐变
这个方案不能实现圆角
当然这些思路都只是“偏方”，像 Firefox 就完全支持自定义样式了，可惜桌面端还是 Chrome 的天下，只能慢慢期待一下 Chrome 后面的更新了。
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/33051.html；
