我們知道瀏覽器自帶的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的實現也是同樣的原理,具體實現方式大家可以在線演示研究,也可以下載源碼,非常簡單實用。