css自定義 range radio select的樣式滑輪，按鈕，選擇框

OBKoro1發表於2017-04-15
CSS

寫在前面：

之前踩坑css的時候，遇到滑輪，按鈕，選擇框這型別的東西，為了頁面效果，總是需要自定義他們的樣式，而不使用他們的預設樣式。當時寫的時候，我也是蠻頭疼的，弄了個demo，連結在下面。對此做個總結。本文是面向前端小白的，大手子可以跳過，寫的不好之處多多見諒。

額，今天就先大概的將程式碼貼上來，考慮到篇幅的問題，就先寫一下三個的實現方式，一般也都看得懂，程式碼註釋的非常詳細。因為細分下來內容也很多，準備之後再將如何實現的方式，屬性，優化以及如何相容各個瀏覽器的方式一步步的寫出來。

最終效果：

文章下面有demo連結

如何使用這些屬性？

用法很簡單，如下所示：

<input type="range">//滑動條
<input type="radio">//按鈕
<select>//選擇框
複製程式碼

input type="range"樣式修改：

滑塊的預設樣式
滑塊修改後的實現效果

html content

<div>
 <input type="range" class="slider-block" id="slider" max="18" min="6" step="1" value="6">
    <!--主要是一個type="range"屬性,其他的會在細分的文章裡面講出來-->
</div>
複製程式碼

csscontent

.slider-block{
            outline: none; /*去掉點選時出現的外邊框*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*這三個是去掉那條線原有的預設樣式，劃重點！！*/
            width: 30%;
            height: 0.3rem;
            background: orange; /*這三個是設定滑塊下面那條線的樣式*/
        }
        input[type="range"]::-webkit-slider-thumb {
            /*::-webkit-slider-thumb是代表給滑塊的樣式進行變更*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*//這三個是去掉滑塊原有的預設樣式，劃重點！！*/
            -webkit-box-shadow:0 0 2px ;/*設定滑塊的陰影*/
            width: 2.6rem;
            height:1.6rem;
            background: url("images/js2-d_03.png");
            background-size: cover; /*//這幾個是設定滑塊的樣式*/
        }
        //文章下面有demo連結
複製程式碼

文章下面有demo連結

程式碼裡面註釋關鍵點都寫了，還不能理解的，可以看下demo。

input type="radio"修改預設樣式

按鈕的預設樣式
radio修改後的實現效果

html content

<form class="task10-main-box-shape" method="post" action="#">
    <!--//表單元素基本上都要加form，傳送的引數的方式，傳遞的位置，這是一個好習慣-->

<div>
    <input id="shape1" name="box-shape" type="radio"  checked="checked" value="shape1" />
    <!--checked屬性是當頁面載入的時候選擇這個按鈕，value是傳送的值-->
    <label for="shape1">對口箱</label><!--/加label標籤點選這個字的時候，可以選中按鈕-->
</div>
</form>
複製程式碼

css樣式這裡相對難點，但我註釋的已經很多了。


        .task10-main-box-shape input[type="radio"]{
            display: none;
            /*隱藏預設按鈕的樣式,這跟其他隱藏預設按鈕的樣式的方法不一樣，注意一下*/
        }
複製程式碼
    .task10-main-box-shape label{  /*這裡是設定文字的樣式*/
            display: inline-block;
            cursor: pointer;
            position: relative;
            padding-left: 3rem;
            margin-right: 6rem;
            font-size: 1.8rem;
            color: rgb(102,102,102);
           
        }
        .task10-main-box-shape label:before { /*這裡是沒被選中時候按鈕的樣式*/
            content: "";
            /*將要自定義的東西設定為空的字串，就可以往裡面隨意加定義的樣式了*/
            display: inline-block;
            background-color: #FFFFFF; /*設定背景*/
            padding:0.45em; /*撐開背景，就是中間那塊白色的*/
            border: 1px solid gray;
            margin-right: 10px;
            position: absolute;
            left: 0;
            bottom: 3px;
            border-radius: 50%; /*設定圓角*/

        }

        input[type=radio]:checked + label:before {/*按鈕被選中之後的樣式，多了一個checked*/
            font-size: 1px;
            color: #FFFFFF;
            border:0.7rem solid rgb(29,122,217);
            /*設定按鈕樣式*/
        }
複製程式碼

select修改預設樣式

選擇框的預設初始樣式
select修改後的實現效果
### html cantent

<div>
    <select class="task10-main-box-row2-select">
        <option>檢視詳情</option>
        <option>我也不知道</option>
        <option>詳情是什麼</option>
    </select>
</div>
複製程式碼

css cantent

    .task10-main-box-row2-select{
            font-size: 1.6rem;
            color: rgb(153,153,153);
            padding: 0.3% 2% 0.3% 1%;
            margin: 0; /*這裡是選擇框裡面的樣式*/
            background: url("images/task10-d_03.png") no-repeat 97%;
            /*97%是設定圖片，也就是三角形的位置*/
            background-size:20%; /*背景圖片的尺寸*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none; /*這三個是隱藏預設樣式*/
        }
複製程式碼

ps:css樣式寫的有點亂，各位看官，將就著看看，下面有demo連結。

總結

總的來說這型別的首先需要將樣式隱藏掉，然後再自行新增需要的型別，但是有些隱藏樣式的方式也不同，有些是這種，appearance:none; -moz-appearance:none; -webkit-appearance:none;像radio按鈕的，反而是display:none;這種型別的。還有的樣式可以寫的很好看，比如滑塊怎麼移動的時候，填充條跟著移動。會的大家都會，要琢磨的精，會別人不會的，才是你身價所在。

後話：

連續一個多星期不睡午覺，終於熬不住了。感覺身體被掏空，以後就改為下午的時候更文。因為一些事情耽擱了，直到晚上才弄好。下面幾天會逐漸把這幾個如何實現的方式，屬性，優化以及如何相容各個瀏覽器的方式一步步的寫出來，連結會放在文末的。

假裝這裡有三個連結。 range滑塊自定義樣式，步驟詳解以及實際應用

最後：希望看完的朋友點個喜歡，也可以關注一下我，現在這階段基本上每個月都不會少於十五篇文章（看到乾貨我也會進行分享）。碼字不易，感謝支援，感激不盡！

掘金個人主頁

demo連結：https://obkoro1.github.io/article-demo/diy-style/diyStyle.html

以上，2017.4.16.

相關文章