关于css:CSS-美化滑动输入条-input-range

欢送关注我的公众号：前端侦探

对于原生 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: 1px solid transparent;
    margin-top: -8px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0 0 0 99vw; /* 绘制元素外矩形 */
}

成果如下

留神几点：

1. border-image 要想失效，必须指定border，这里设置的是border: 1px solid transparent;
2. 矩形是通过线性突变绘制的 linear-gradient(#f44336,#f44336)
3. border-image 中 8 20 8 0 示意border-image-width，间隔上、右、下、左的间隔，因为滑块本身大小是 20 * 20，所以这个能够确定高度是 4 (20 – 8- 8)，地位是滑块本身的最右边（间隔左边是 20）
4. border-image 中 0 0 0 99vw示意 border-image-outset扩大大小，这里指的是向左扩大 99vw 的间隔

接下来通过 overflow:hidden 暗藏里面的局部就能够了

::-webkit-slider-container {
    /* 其余款式 */
    overflow: hidden;
}

残缺代码能够拜访：input range (codepen.io)

上面附上残缺代码（最近 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: 1px solid transparent;
    margin-top: -8px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;
}

三、还是有一些局限

下面的实现老本其实是很低的，相比惯例的实现根底上，仅仅减少了 1 行用于绘制元素之外的矩形。

border-image: linear-gradient(#f44336,#f44336) 0 fill / 8 20 8 0 / 0px 0px 0 2000px;

然而，因为是通过超出暗藏的形式裁剪掉多出的局部，使得滑动条边缘是“一刀切”的，所以，如果要求滑动条带有圆角，这种实现形式就不行了

如果还有好的想法欢送留言探讨

四、简略总结一下

对于border-image-outset 这个属性，其实之前曾经在 MDN 上见识过了，但只是简略理解，还感觉很鸡肋，当初看来，这些属性不是没什么用，只是没有碰到适宜利用的场景。上面简略总结一下：

1. 滑动条有 3 个伪元素能够自定义容器、轨道、滑块
2. 伪元素里不能再嵌套伪元素了
3. 元素之外绘制有 box-shadow、outline、border-image 3 种办法
4. border-image 能够应用任意格局图片，包含 CSS 突变
5. 这个计划不能实现圆角

当然这些思路都只是“偏方”，像 Firefox 就齐全反对自定义款式了，惋惜桌面端还是 Chrome 的天下，只能缓缓期待一下 Chrome 前面的更新了。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

欢送关注我的公众号：前端侦探