如何把滑動條變好看一點

tuniutech 發布于2019-08-22 16:45 / 1538人閱讀

摘要：一直知道有個新類型，可以有個滑動條的效果，但是感覺丑不拉幾的，又不知道如何美化，所以一直沒用過。如何美化其實可以把滑動條分為塊滑塊，滑軌，進度條。

一直知道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如何把內部變量如何把文件放在服務器如何把筆記當服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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