巧用CSS3僞類選擇器自定義checkbox和radio的樣式

因爲原生的checkbox和radio的樣式太簡陋了，在設計頁面的時候，設計師每每會設計本身的checkbox和radio樣式。一半狀況下，爲了適應各個瀏覽器的兼容性，咱們都會用其餘的元素替代原生的checkbox和radio，而後用js實現選中和未選中時候的樣式，用來模擬checkbox和radio。

例如這種：

用其餘元素模擬（以checkbox爲例）：

<div class='checkbox'></div>

$('.checkbox').click(function(){
    if($(this).hasClass("checked")){
              $(this).removeClass("checked");
    }else{
             $(this).addClass("checked");
    }
});

運用JS添加點擊事件，切換選中和未選中的狀態。

那麼，能僅僅只用樣式，改變原生的checkbox的樣式呢？

 

使用CSS實現：

在表單元素中，爲了擴大checkbox的點擊範圍，咱們常常用label和checkbox相連，如今也能夠運用這個關係，把樣式加在label上，隱藏checkbox（設置透明度，不能display:none，不然關聯會失效）。

html結構：

<input type="checkbox" id="mycheck" />
<lable for="mycheck">check me</label>

 

css樣式：

input[type="checkbox"] + label::before {
content: '\a0'; /* non-break space */
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}

 

利用僞元素::before給label添加樣式，利用CSS3的僞類選擇器:checked，:hover，:focus，:disabled設置不用狀態的樣式

 

input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}

 

input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a;
}
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555;
}

 

 

這樣，僅僅使用樣式就能顯示不一樣狀態下的checkbox樣式了。