如何把滑动条变好看一点

tuniutech 发布于2019-08-22 16:45 / 1502人阅读

摘要：一直知道有个新类型，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。如何美化其实可以把滑动条分为块滑块，滑轨，进度条。

一直知道html5 input有个新类型range，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。最近在网上瞅了瞅，发现滑动条还是可以美化的，所以掏出来给大家摆摆~~

默认样式

首先写出一个滑动条，用法就像写一个输入框一样简单：

没有美化的滑动条(谷歌)就是这样的：

相信应该没人会选择直接用这个样式吧。

如何美化

其实可以把滑动条分为3块：滑块，滑轨，进度条。然后针对不同的块调整样式。大致步骤如下：

去除默认样式
每个元素都是有自己默认样式的，有些样式不清除的话自定义的样式就不会生效。

   input[type=range]{
       -webkit-appearance: none;
       width: 300px;
       border-radius: 10px;
   }

此处要说说这个 -webkit-appearance是个啥，该属性专门用于改变按钮和其他控件的外观。像button,input之类的有自己外观的就是默认有这个属性，当然span之类的是没有的。但是我们可以自己设置，比如span标签，默认下就是个文本，想要什么样式需要自己添加，这时如果你想给span一个按钮的样式，

   span{
       -webkit-appearance:button;
   }

它能快速地把一些按钮的特效设置上去：

当然，这没有什么用处，非要把驴唇接到马嘴上是很奇怪的~
还有滑块的默认样式：

   input[type=range]::-webkit-slider-thumb{   /*设置滑块*/
       -webkit-appearance:button;
   }

轮廓线也要去掉：

   input[type=range]:focus{
       outline:none;
   }

给滑块设置样式

   input[type=range]::webkit-slider-thumb{
       -webkit-appearance: none;     //以下样式随个人喜好
       width: 25px;   
       height: 25px;
       margin-top: -5px;     //让滑轨在滑块中间
       cursor: pointer;
       border-radius: 50%;
       background: #DEF3F8;
       box-shadow: 0 0 10px #63A35C inset;    
   }

给滑轨设置样式

   input[type=range]::-webkit-slider-runnable-track{   /*滑动条样式*/
       height: 15px;
       border-radius: 10px;
       border: 1px solid currentcolor;
   }

填充进度条
作用两边随滑块变化长度，所以需要JS：

   $("input[type=range]").css("background","linear-gradient(to right, #63A35C 0%, #ccc 50%, antiquewhite)");
   $("input[type=range]").mousemove(function(){
       $(this).css("background","linear-gradient(to right, #63A35C 0%, #ccc " + this.value + "%, antiquewhite)");
   })     //样式随心~

然后样式就是这样的：

至于第五步就是兼容其它浏览器啦，在下这里就不介绍了，有兴趣的喷油可以看我学习的地址：

https://blog.csdn.net/u013347...

写后感

关于-webkit-appearance，::-webkit-slider-thumb，::-webkit-slider-runnable-track这些如果不是网上看到可能一直都不会知道有这么个属性可以设置o(╯□╰)o，看来还有很多东西有待探索啊~

云服务器 GPU云服务器如何把网站源码 js如何把内部变量如何把文件放在服务器如何把笔记当服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94632.html

如何把滑动条变好看一点

摘要：一直知道有个新类型，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。如何美化其实可以把滑动条分为块滑块，滑轨，进度条。一直知道html5 input有个新类型range，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。最近在网上瞅了瞅，发现滑动条还是可以美化的，所以掏出来给大家摆摆~~ 默认样式首先写出一个滑动条，用法就像写一...

Null 2019-08-29 15:10 评论0 收藏0
如何把滑动条变好看一点

摘要：一直知道有个新类型，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。如何美化其实可以把滑动条分为块滑块，滑轨，进度条。一直知道html5 input有个新类型range，可以有个滑动条的效果，但是感觉丑不拉几的，又不知道如何美化，所以一直没用过。最近在网上瞅了瞅，发现滑动条还是可以美化的，所以掏出来给大家摆摆~~ 默认样式首先写出一个滑动条，用法就像写一...

wenhai.he 2019-08-02 10:18 评论0 收藏0
简单实用的css边框属性border

摘要：本文主要讲述利用属性做出不同的几何形状从而适用于比较好看的视觉样式。任意组合就能组成不同的由三角形组成的其它几何形状了。本文主要讲述利用border属性做出不同的几何形状从而适用于比较好看的视觉样式。预备知识 border相关属性 border-width 边框的宽度 border-style 边框的样式 border-color 边框的颜色案例举例为了更加通俗易懂，dem...

null1145 2019-08-30 13:56 评论0 收藏0
【Python】逆向JavaScript，深度解析Q群成员数据的采集与邮件的来源，阅读完后你就明白了

摘要：在这里真心感谢一直在支持我的那几个粉丝，谢谢你们的持续关注点赞。果然，第三个包也是按的步差来的，而为零不变，也不变。函数里面的话就是个循环咯，当条件不满足时就一直加，知道条件满足为止。我每天都会抽时间给我的粉丝解答，给与一些学习资源。目录前言准备工作分析（x0）分析（x1）分析（...

dkzwm 2021-09-09 09:34 评论0 收藏0