怎么用CSS来美化滑动输入条

这篇文章主要为大家展示了“怎么用CSS来美化滑动输入条”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用CSS来美化滑动输入条”这篇文章吧。

成都创新互联公司自2013年创立以来,先为台安等服务建站,台安等地企业,进行企业商务咨询服务。为台安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

关于原生 input range 滑动输入条如何自定义样式一直都是我心里的一道坎,一般情况下,可以很轻易的美化到这个程度。

怎么用CSS来美化滑动输入条

为什么很容易呢?因为这些都是有对应的伪元素可以修改的

::-webkit-slider-container {
  /*可以修改容器的若干样式*/
}
::-webkit-slider-runnable-track {
  /*可以修改轨道的若干样式*/
}
::-webkit-slider-thumb {
  /*可以修改滑块的若干样式*/
}

可是,偏偏没有已滑过部分的样式,如果要定义下面这样的样式,单纯的 CSS 可能没办法实现了

怎么用CSS来美化滑动输入条

注意:Firefox 有单独的伪类可以修改,本文讨论的是 Chrome 实现方案

一、我的实现思路

既然没有专门的伪元素可以修改已滑过部分的颜色,而且只有滑块是可动的,是不是可以在滑块上下手呢?

假设滑块左边有一个矩形,是跟随滑块一起的,

怎么用CSS来美化滑动输入条

当这个矩形足够长时,能够完全覆盖左边的轨道,在可视范围内,是不是就可以表示左边的已滑过部分了呢?示意如下(左边半透明表示滑动条之外)

怎么用CSS来美化滑动输入条

尝试过伪元素的想法,像这样

::-webkit-slider-thumb::after{
  /*本想绘制一个足够长的矩形*/
}

可惜,伪元素里并不能再次生成伪元素。

所以,如何在元素之外绘制一个矩形呢?

二、通过 border-image 在元素之外绘制图形

有哪些方式可以在元素之外绘制图形呢?想了一下,有 box-shadowoutline,但是好像并不适合这种情况,我们需要绘制的是一个尺寸可控的矩形,而这两种方式都不能很好地控制形状。那还有其他方式吗?

还真有!前两天刚看到张鑫旭老师的一篇文章:被低估的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; /*绘制元素外矩形*/
}

效果如下

怎么用CSS来美化滑动输入条

注意几点:

  • 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;
}

怎么用CSS来美化滑动输入条

完整代码可以访问: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: 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;

但是,由于是通过超出隐藏的方式裁剪掉多出的部分,使得滑动条边缘是“一刀切”的,所以,如果要求滑动条带有圆角,这种实现方式就不行了

怎么用CSS来美化滑动输入条

以上是“怎么用CSS来美化滑动输入条”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享名称:怎么用CSS来美化滑动输入条
文章位置:http://pwwzsj.com/article/gcpdgd.html