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的實現也是一樣的原理，具體實現方式你們能夠在線演示研究，也能夠下載源碼，很是簡單實用。