純css 實現自訂checkbox複選框

標籤：html   透明   inter   trap   info   做了   標籤   位置   分享圖片   

話不多說，直入主題。眾所周知原生的checkbox複選框、radio選項按鈕、select選擇框，不同瀏覽器差別較大，最重要的一點是不怎麼好看，如果直接拿原生用，可能會影響整體的美觀。項目中用的第三方UI這些都已經很完備，但是在小型項目不想採用第三方UI或者使用的是Bootstrap等沒有定製的checkbox樣式時，就需要自己去做一個對應的複選框了。本次本著讓你改動最小的情況下用純CSS做了一個相對美觀的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單選框，供大家參考。

 

純css 實現自訂checkbox複選框