一直都知道html5input有个新的range类型，可以起到slider的效果，但是感觉很难看，不知道怎么美化，所以有了从来没有用过它。最近在网上看了一下，发现滑块还是可以美化的，就拿出来给大家看看~~默认样式先写一个滑块，用法和写输入框一样简单：Sliderwithoutbeautification(Google)是这样的：相信没有人会选择直接使用这种样式。如何美化其实可以把滑块分为3个部分：滑块、滑轨、进度条。然后调整不同块的样式。一般步骤如下：删除默认样式。每个元素都有自己的默认样式。如果不清除某些样式，自定义样式将不会生效。输入[类型=范围]{-webkit-外观：无；宽度：300px；边界半径：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;高度：25px；边距顶部：-5px；//让滑轨在slidercursor:pointer的中间；边界-半径：50%；背景：#DEF3F8；框阴影：0010px#63A35C插图；}设置滑块的样式input[type=range]::-webkit-slider-runnable-track{/*滑块样式*/height:15px;边界半径：10px；border:1pxsolidcurrentcolor;}padding进度条作用在两边，长度随滑块变化，所以需要JS:$('input[type=range]').css('background','linear-gradient(toright,#63A35C0%,#ccc50%,antiquewhite)');$('输入[类型=范围]').mousemove(函数ion(){$(this).css('background','linear-gradient(toright,#63A35C0%,#ccc'+this.value+'%,antiquewhite)');})//styleasyoulike~那么style是这样的：至于第五步，兼容其他浏览器。这里就不介绍了。有兴趣的可以看看我了解到的地址：https://blog.csdn.net/u013347..写完-webkit-appearance,::-webkit-slider-thumb,::-webkit-slider-runnable-track，如果不是在网上看到，你可能永远不知道还有这么一个属性可以设置o(╯□╰)o，看来还有很多东西需要探索~
