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

時間 2019-11-16

標籤 css 自定義 range radio select 樣式滑輪按鈕選擇欄目 CSS 简体版

原文原文鏈接

寫在前面：

以前踩坑css的時候，遇到滑輪，按鈕，選擇框這類型的東西，爲了頁面效果，老是須要自定義他們的樣式，而不使用他們的默認樣式。當時寫的時候，我也是蠻頭疼的，弄了個demo，連接在下面。對此作個總結。本文是面向前端小白的，大手子能夠跳過，寫的很差之處多多見諒。css

額，今天就先大概的將代碼貼上來，考慮到篇幅的問題，就先寫一下三個的實現方式，通常也都看得懂，代碼註釋的很是詳細。由於細分下來內容也不少，準備以後再將如何實現的方式，屬性，優化以及如何兼容各個瀏覽器的方式一步步的寫出來。html

最終效果：

如何使用這些屬性？

用法很簡單，以下所示：前端

<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。git

input type="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修改默認樣式

### 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連接。github

總結

總的來講這類型的首先須要將樣式隱藏掉，而後再自行添加須要的類型，可是有些隱藏樣式的方式也不一樣，有些是這種，appearance:none; -moz-appearance:none; -webkit-appearance:none;像radio按鈕的，反而是display:none;這種類型的。還有的樣式能夠寫的很好看，好比滑塊怎麼移動的時候，填充條跟着移動。會的你們都會，要琢磨的精，會別人不會的，纔是你身價所在。web