欢迎关注我的公众号：前端侦探关于如何自定义原生inputrange滑动输入栏的样式一直是我心中的一道坎。一般情况下，可以轻松美化到为什么这么容易呢？因为这些都有对应的伪元素可以修改::-webkit-slider-container{/*container的几种样式可以修改*/}::-webkit-slider-runnable-track{/*container的几种样式track可以修改Style*/}::-webkit-slider-thumb{/*slider的几个样式可以修改*/}但是，已经滑过的部分没有样式。如果你想定义下面的样式，简单的CSS可能做不到注意：Firefox有一个单独的伪类，可以修改。本文讨论Chrome的实现。1、我的实现思路由于没有专门的伪元素来修改已经滑动的部分的颜色，只有滑块是可移动的，请问是否可以从滑块入手呢？假设在滑块的左侧有一个矩形，它跟在滑块后面。当矩形足够长时，它可以完全覆盖左边的轨道。在可见范围内，是否能代表已经向左滑动的部分？原理图如下（左边半透明表示在slider外面）我尝试了伪元素的思路，像这样::-webkit-slider-thumb::after{/*我想画一个长长的enoughrectangle*/}不幸的是，伪元素伪元素无法再次生成。那么，如何在元素外面画一个矩形呢？2、通过border-image绘制元素外图形绘制元素外图形有哪些方法？想了想，还有box-shadow和outline，不过好像不太适合这种情况。我们需要画的是一个大小可控的矩形，这两种方式都不能很好的控制形状。还有别的办法吗？真的有！前两天刚看到张新旭老师的一篇文章：被低估的border-image属性，其中一个是在元素之外构造图像，不占用任何空间。赶紧试试吧，这里画一个宽度为99vw的矩形（刚好能盖住slider），代码如下：外观：无；宽度：20px；高度：20px边框半径：50%；背景色：#f44336；边框：1px实心透明；边距顶部：-8px；border-image:线性渐变(#f44336,#f44336)0fill/82080/00099vw;/*在元素外画一个矩形*/}效果如下：注意几点：border-image必须指定边框才能生效，这里是border:1pxsolidtransparent;矩形是通过线性渐变绘制的linear-82080ingradient(#f44336,#f44336)border-image表示border-image-width，从上、右、下、左的距离，因为滑块的大小本身是20*20，所以这样可以确定高度是4（20-8-8），位置是滑块本身的最左边（距离右边的距离是20）。border-image中的00099vw表示border-image-outset展开尺寸，指的是99vw向左延伸的距离接下来可以通过overflow隐藏外面的部分：hidden::-webkit-slider-container{/*其他样式*/overflow:hidden;}完整代码可以访问：inputrange(codepen.io)下面附上完整代码（codepen最近好像不稳定）[type="range"]{-webkit外观：无；外观：无；保证金：0；大纲：0；背景颜色：透明；宽度：500px;}[type="range"]::-webkit-slider-runnable-track{高度：4px;背景：#eee;}[type="range"i]::-webkit-slider-container{height:20px;溢出：隐藏；}[type="range"]::-webkit-slider-thumb{-webkit-appearance：无；外观：无；宽度：20px；高度：20px；-颜色：#f44336；边框：1px实心透明；边距顶部：-8px；border-image:linear-gradient(#f44336,#f44336)0fill/82080/0px0px02000px;}第三，还是有一些限制。以上实施成本其实很低。与常规实现相比，只增加了一行绘制元素外的矩形border-image：linear-gradient(#f44336,#f44336)0fill/82080/0px0px02000px;但是，由于超出隐藏的部分是通过beyondhidden的方式切掉的，所以滑块的边缘是“一刀切”的，所以如果要求滑块有圆角，这种实现方式是行不通的。如果大家还有好的想法欢迎留言讨论。4.简单总结一下属性border-image-outset。其实之前在MDN上看过，只是简单的了解了一下，还是觉得很鸡肋。现在看看吧，这些属性不是没用，而是没有合适的应用场景。这里简单总结一下：slider有3个伪元素，可以自定义container、track、slider。伪元素不能再嵌套在伪元素中。在元素外部，有box-shadow、outline、border-image三种方法。border-image可以使用任何格式的图像，包括CSS渐变。此解决方案无法实现圆角。当然，这些想法只是“偏方”。与Firefox一样，它完全支持自定义样式。遗憾的是，桌面端还是以Chrome为主，只能慢慢期待Chrome了。稍后更新。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
