復選框checkbox樣式修改

該方法只兼容IE9及以上

將checkbox和label關聯起來，

將checkbox隱藏掉，通過點擊label來點擊checkbox，label的樣式即可自定義。

通過checkbox:checked + label:after來控制點擊之后的符號

 

通常我們使用以下html結構，我們給復選框定義id#checkbox_a1，然后使用label的for屬性與之關聯，這樣的話，用戶點擊label的時候，實際上就相當於點擊了#checkbox_a1。

<input type="checkbox" id="checkbox_a1" class="chk_1" /> 
<label for="checkbox_a1">check</label> 


通過label和checkbox，我們可以將checkbox隱藏，而將label制作為各種漂亮超酷的復選框樣式。我們可以使用:before和:after偽元素來制作各種效果，如滑動按鈕的效果。這些效果都可以通過相鄰兄弟選擇器來選擇與checkbox相鄰的label來實現，下面是一個簡單的例子：

.chk_1 { 
    display: none; 
} 
 
.chk_1 + label { 
    #FFF; 
    border: 1px solid #C1CACA; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); 
    padding: 9px; 
    border-radius: 5px; 
    display: inline-block; 
    position: relative; 
    margin-right: 30px; 
} 
.chk_1 + label:active { 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
} 
 
.chk_1:checked + label { 
    #ECF2F7; 
    border: 1px solid #92A1AC; 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1); 
    color: #243441; 
} 
 
.chk_1:checked + label:after { 
    content: '\2714'; //勾選符號 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    color: #758794; 
    width: 100%; 
    text-align: center; 
    font-size: 1.4em; 
    padding: 1px 0 0 0; 
    vertical-align: text-top; 
}