自定義經常使用input表單元素一：純css 實現自定義checkbox複選框

最下面那個是以前寫的  今天在作項目的時候發現，以前寫的貌似仍是有點多，起碼增長的span標籤能夠去掉，這樣保持和原生相同的結構最好的，僅僅是樣式上的變化。今天把項目中的這個給更新上來。下面就直接仍是放代碼吧，圖就再也不截取了，由於外觀沒發生任何變化，僅僅是內在改變了，話說內在的改變，只有你去了解你才知道，人不就是這樣嗎？

HTML部分：

<input type="checkbox" id="my_checkbox1" class="my_checkbox">
<label for="my_checkbox1" class="checkbox_label">自定義的複選框</label>

下面是CSS樣式部分：

/*
*自定義的checkbox
*/

/*設置複選框描述文字爲相對定位，由於下面要在此label下面設置兩個僞類，基於它進行定位。*/
label.checkbox_label {  
    position: relative;
    display: inline-block;
    padding: 2px 9px;
    -webkit-user-select: none;
    user-select: none; /*禁止選中label中的文字，由於勾選時雙擊了很容易選中*/
}
/*隱藏原生的input複選框*/
.my_checkbox {
    opacity: 0;
}
/*after僞類生成固定大小的選框，邊框顏色設置爲灰色，定位到隱藏的checkbox位置上*/
label.checkbox_label::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: -15px;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}
/*原生checkbox hover時，此時自定義的僞類選框邊框顏色變化爲藍色*/
.my_checkbox:hover+label.checkbox_label::after {
    border-color: #1890ff;
}
/*原生的checkbox選中後，對應的自定義選框添加邊框顏色和背景顏色*/
.my_checkbox:checked+label.checkbox_label::after {
    border-color: #1890ff;
    background-color: #1890ff;
}
/*生的checkbox選中後，因爲自定義的選框背景爲純色，故這裏又定義了一個before僞類來模擬勾選的對勾，這裏用一個盒子的邊框模擬對勾選中符號*/
.my_checkbox:checked+label.checkbox_label::before {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #fff;
    background-color: #1890ff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 5px;
    left: -10px;
    z-index: 2;
    box-sizing: border-box;
}

思路分析：自定義的複選框經過label下的僞類生成，一個生成複選框的方框，一個生成複選框的勾選符號便可。而後根據原生checkbox的checked值進行切換選中和未選中的樣式。

 

下面的是以前寫的，多寫了span  。。。。。。

------------------------------------------------長長長長的分割線----------------------------------------------------------繼續分割-------------------------------------------------------------該結束了吧-------------------------------------------------------

 

話很少說，直入主題。衆所周知原生的checkbox複選框、radio單選按鈕、select選擇框，不一樣瀏覽器差異較大，最重要的一點是不怎麼好看，若是直接拿原生用，可能會影響總體的美觀。項目中用的第三方UI這些都已經很完備，可是在小型項目不想採用第三方UI或者使用的是Bootstrap等沒有定製的checkbox樣式時，就須要本身去作一個對應的複選框了。本次本着讓你改動最小的狀況下用純CSS作了一些自定義的，相對美觀的input特殊元素，本節爲自定義複選框checkbox。以下圖：

 下面直接放代碼：

HTML部分：

<label for="my_checkboc">           
        <input type="checkbox" id="my_checkboc" class="my_checkbox">
        <!--增長的一個自定義複選框元素span只要在其上應用樣式-->
        <span class="new_checkbox"></span>
         複選框1
</label>

注意，這個HTML結構，label標籤最外層，裏面包含一個原生checkbox和一個須要自定義樣式的span，用來定義checkbox樣式。

CSS部分：

label {
    position: relative;
}

label .new_checkbox {
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    top: 4px;
    left: 2px;
    z-index: 1;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s;
}

label .new_checkbox:hover {
    border-color: #1890ff;
}

.my_checkbox {
    opacity: 0;
}

.my_checkbox:checked+span {
    border-color: #1890ff;
    background-color: #1890ff;
}

/*關聯checkbox的值*/
.my_checkbox:checked+span::before {
    content: "";
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #fff;
    background-color: #1890ff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    left: 4.5px;
    box-sizing: border-box;
}

定義好span的樣式，定位到合適的位置，對原來的checkbox設置透明的爲0，這樣樣式部分就能夠了。下一步就是把點擊選中加進去。因爲lable和checbox時綁定的，故點擊label區域，便可將改checkbox選中，此時須要對自定義的span添加選中樣式便可。用css 「+」選擇器，如代碼中所示，在checkbox選中時，其後一個span元素將會添加：before僞類，顯示選中的圖標。圖中的選中對勾圖標爲只有有邊框和下邊框的長方體旋轉而成。

若有疑問請留言，這個時暫時這樣寫，後面會更新，以及相關的純css打造的radio複選框和js打造的select單選框，供你們參考。