如何把滑動(dòng)條變好看一點(diǎn)

wenhai.he 發(fā)布于2019-08-02 10:18 / 2800人閱讀

摘要：一直知道有個(gè)新類型，可以有個(gè)滑動(dòng)條的效果，但是感覺(jué)丑不拉幾的，又不知道如何美化，所以一直沒(méi)用過(guò)。如何美化其實(shí)可以把滑動(dòng)條分為塊滑塊，滑軌，進(jìn)度條。

一直知道html5 input有個(gè)新類型range，可以有個(gè)滑動(dòng)條的效果，但是感覺(jué)丑不拉幾的，又不知道如何美化，所以一直沒(méi)用過(guò)。最近在網(wǎng)上瞅了瞅，發(fā)現(xiàn)滑動(dòng)條還是可以美化的，所以掏出來(lái)給大家擺擺~~

默認(rèn)樣式

首先寫(xiě)出一個(gè)滑動(dòng)條，用法就像寫(xiě)一個(gè)輸入框一樣簡(jiǎn)單：

沒(méi)有美化的滑動(dòng)條(谷歌)就是這樣的：

相信應(yīng)該沒(méi)人會(huì)選擇直接用這個(gè)樣式吧。

如何美化

其實(shí)可以把滑動(dòng)條分為3塊：滑塊，滑軌，進(jìn)度條。然后針對(duì)不同的塊調(diào)整樣式。大致步驟如下：

去除默認(rèn)樣式
每個(gè)元素都是有自己默認(rèn)樣式的，有些樣式不清除的話自定義的樣式就不會(huì)生效。

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

此處要說(shuō)說(shuō)這個(gè) -webkit-appearance是個(gè)啥，該屬性專門(mén)用于改變按鈕和其他控件的外觀。像button,input之類的有自己外觀的就是默認(rèn)有這個(gè)屬性，當(dāng)然span之類的是沒(méi)有的。但是我們可以自己設(shè)置，比如span標(biāo)簽，默認(rèn)下就是個(gè)文本，想要什么樣式需要自己添加，這時(shí)如果你想給span一個(gè)按鈕的樣式，

   span{
       -webkit-appearance:button;
   }

它能快速地把一些按鈕的特效設(shè)置上去：

當(dāng)然，這沒(méi)有什么用處，非要把驢唇接到馬嘴上是很奇怪的~
還有滑塊的默認(rèn)樣式：

   input[type=range]::-webkit-slider-thumb{   /*設(shè)置滑塊*/
       -webkit-appearance:button;
   }

輪廓線也要去掉：

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

給滑塊設(shè)置樣式

   input[type=range]::webkit-slider-thumb{
       -webkit-appearance: none;     //以下樣式隨個(gè)人喜好
       width: 25px;   
       height: 25px;
       margin-top: -5px;     //讓滑軌在滑塊中間
       cursor: pointer;
       border-radius: 50%;
       background: #DEF3F8;
       box-shadow: 0 0 10px #63A35C inset;    
   }

給滑軌設(shè)置樣式

   input[type=range]::-webkit-slider-runnable-track{   /*滑動(dòng)條樣式*/
       height: 15px;
       border-radius: 10px;
       border: 1px solid currentcolor;
   }

填充進(jìn)度條
作用兩邊隨滑塊變化長(zhǎng)度，所以需要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)");
   })     //樣式隨心~

然后樣式就是這樣的：

至于第五步就是兼容其它瀏覽器啦，在下這里就不介紹了，有興趣的噴油可以看我學(xué)習(xí)的地址：

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

寫(xiě)后感

關(guān)于-webkit-appearance，::-webkit-slider-thumb，::-webkit-slider-runnable-track這些如果不是網(wǎng)上看到可能一直都不會(huì)知道有這么個(gè)屬性可以設(shè)置o(╯□╰)o，看來(lái)還有很多東西有待探索啊~