成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Null / 1091人閱讀

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

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

默認(rèn)樣式

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

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

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

如何美化

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

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

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

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

   span{
       -webkit-appearance:button;
   }

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

當(dāng)然，這沒有什么用處，非要把驢唇接到馬嘴上是很奇怪的~
還有滑塊的默認(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{   /*滑動條樣式*/
       height: 15px;
       border-radius: 10px;
       border: 1px solid currentcolor;
   }

填充進(jìn)度條
作用兩邊隨滑塊變化長度，所以需要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...

寫后感

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113149.html

相關(guān)文章

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

    摘要：一直知道有個(gè)新類型，可以有個(gè)滑動條的效果，但是感覺丑不拉幾的，又不知道如何美化，所以一直沒用過。如何美化其實(shí)可以把滑動條分為塊滑塊，滑軌，進(jìn)度條。 一直知道html5 input有個(gè)新類型range，可以有個(gè)滑動條的效果，但是感覺丑不拉幾的，又不知道如何美化，所以一直沒用過。最近在網(wǎng)上瞅了瞅，發(fā)現(xiàn)滑動條還是可以美化的，所以掏出來給大家擺擺~~ 默認(rèn)樣式 首先寫出一個(gè)滑動條，用法就像寫一...

    tuniutech 評論0 收藏0

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

    摘要：一直知道有個(gè)新類型，可以有個(gè)滑動條的效果，但是感覺丑不拉幾的，又不知道如何美化，所以一直沒用過。如何美化其實(shí)可以把滑動條分為塊滑塊，滑軌，進(jìn)度條。 一直知道html5 input有個(gè)新類型range，可以有個(gè)滑動條的效果，但是感覺丑不拉幾的，又不知道如何美化，所以一直沒用過。最近在網(wǎng)上瞅了瞅，發(fā)現(xiàn)滑動條還是可以美化的，所以掏出來給大家擺擺~~ 默認(rèn)樣式 首先寫出一個(gè)滑動條，用法就像寫一...

    wenhai.he 評論0 收藏0

  • 簡單實(shí)用的css邊框?qū)傩詁order

    摘要：本文主要講述利用屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。任意組合就能組成不同的由三角形組成的其它幾何形狀了。 本文主要講述利用border屬性做出不同的幾何形狀從而適用于比較好看的視覺樣式。 預(yù)備知識 border相關(guān)屬性 border-width 邊框的寬度 border-style 邊框的樣式 border-color 邊框的顏色 案例舉例 為了更加通俗易懂，dem...

    null1145 評論0 收藏0

  • 【Python】逆向JavaScript，深度解析Q群成員數(shù)據(jù)的采集與郵件的來源，閱讀完后你就明白了

    摘要：在這里真心感謝一直在支持我的那幾個(gè)粉絲，謝謝你們的持續(xù)關(guān)注點(diǎn)贊。果然，第三個(gè)包也是按的步差來的，而為零不變，也不變。函數(shù)里面的話就是個(gè)循環(huán)咯，當(dāng)條件不滿足時(shí)就一直加，知道條件滿足為止。我每天都會抽時(shí)間給我的粉絲解答，給與一些學(xué)習(xí)資源。 目錄 前言 準(zhǔn)備工作 分析（x0） 分析（x1） 分析（...

    dkzwm 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<