如何把滑動條變好看一點

一直知道html5 input有個新類型range，能夠有個滑動條的效果，可是感受醜不拉幾的，又不知道如何美化，因此一直沒用過。最近在網上瞅了瞅，發現滑動條仍是能夠美化的，因此掏出來給你們擺擺~~

默認樣式

首先寫出一個滑動條，用法就像寫一個輸入框同樣簡單：

<input type="range">

沒有美化的滑動條(谷歌)就是這樣的：

相信應該沒人會選擇直接用這個樣式吧。

如何美化

其實能夠把滑動條分爲3塊：滑塊，滑軌，進度條。而後針對不一樣的塊調整樣式。大體步驟以下：

1. 去除默認樣式
   每一個元素都是有本身默認樣式的，有些樣式不清除的話自定義的樣式就不會生效。

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

2. 給滑塊設置樣式

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

3. 給滑軌設置樣式

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

4. 填充進度條
   做用兩邊隨滑塊變化長度，因此須要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，看來還有不少東西有待探索啊~