CSS3實現自定義Checkbox和Radiobox

我們知道瀏覽器自帶的Checkbox復選框不怎么美觀（這或許是我們看習慣了的緣故），而且復選框在不同的瀏覽器上顯示的樣式又有很大的差異，由於目前越來越多的人開始接受支持CSS3的現代瀏覽器，所以今天就簡單的用一些CSS3代碼來自定義Checkbox的顯示方式，個人覺得比瀏覽器自帶的Checkbox美觀不少。

下面先來看一下最終實現效果

效果演示地址

效果圖如下

 

下面來分析一下源代碼，原理很簡單，先把頁面上<input type="checkbox" />的display設置為none，從而把它隱藏掉，然后利用CSS3代碼來繪制與checkbox鄰近的label元素：

HTML代碼：

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
        <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
        <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
        <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

CSS3代碼：

.regular-checkbox + label {
    background-color: #fafafa;
    border: 1px solid #cacece;
    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: 3px;
    display: inline-block;
    position: relative;
}

下面的CSS代碼可以讓checkbox選中后出現陰影的效果，主要利用了box-shadow屬性：

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

radiobox的實現也是同樣的原理，具體實現方式大家可以在線演示研究，也可以下載源碼，非常簡單實用。