藍(lán)藍(lán)設(shè)計(jì)( www.shtzxx.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

單選框Radiobox和復(fù)選框checkbox在網(wǎng)頁中也十分常見，雖然它沒有按鈕的交互性強(qiáng)，但是如果能把它們像按鈕那樣美化一下，那也是非常不錯(cuò)的。本文收集了10個(gè)相對(duì)比較漂亮的美化版單選框和復(fù)選框，希望你會(huì)喜歡。

1、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式

之前我們分享過一款非常不錯(cuò)的CSS3自定義checkbox復(fù)選框純CSS3美化Checkbox和Radiobox按鈕，外觀非常時(shí)尚。今天我們來分享一款9款樣式迷人的CSS3漂亮的自定義checkbox復(fù)選框。這幾款復(fù)選框樣式很豐富，使用起來也比較方便。

在線演示        源碼下載

2、CSS3自定義發(fā)光Radiobox單選框

之前我們分享過一些CSS3和HTML5實(shí)現(xiàn)的自定義checkbox和Radiobox，比如純CSS3美化Checkbox和Radiobox按鈕，不僅外觀唯美，而且Radiobox選中時(shí)還有動(dòng)畫效果。今天我們要來分享一款CSS3實(shí)現(xiàn)的自定義發(fā)光radiobox單選框插件，該radiobox選中時(shí)也有滑塊的動(dòng)畫。

在線演示        源碼下載

3、CSS3自定義美化復(fù)選框Checkbox組合

今天我們要來分享一組非常漂亮的CSS3自定義復(fù)選框checkbox，每一個(gè)checkbox都有其各自的特點(diǎn)。有幾款checkbox在選中的情況下還會(huì)出現(xiàn)動(dòng)畫效果，非常不錯(cuò)的CSS3自定義美化checkbox組合。另外，之前分享過的jQuery實(shí)現(xiàn)美化版的單選框和復(fù)選框也是非常不錯(cuò)。

在線演示        源碼下載

4、HTML5/CSS3開關(guān)按鈕 立體3D按鈕

之前我介紹過幾款漂亮的CSS3開關(guān)切換按鈕，比如這款CSS3渲染Checkbox實(shí)現(xiàn)3D開關(guān)切換按鈕就利用了CSS3和checkbox實(shí)現(xiàn)了開關(guān)切換按鈕。今天介紹的這款HTML5/CSS3開關(guān)切換按鈕是利用純CSS3的，代碼非常簡(jiǎn)單，3D效果也還可以。

在線演示        源碼下載

5、CSS3響應(yīng)式表單 可切換表單主題

之前我們利用CSS3自定義Checkbox和自定義Radiobox，這次要分享的一款CSS3響應(yīng)式表單不僅美化了checkbox和Radiobox，而且也自定義美化了輸入框、下拉框以及多項(xiàng)選擇框，幾乎所有的表單元素都美化了，而且整體上還不錯(cuò)。另外，這款CSS3表單還可以切換主題，換一下表單風(fēng)格也是不錯(cuò)的。

在線演示        源碼下載

6、非常個(gè)性化的CSS3自定義checkbox和radiobox

對(duì)于瀏覽器默認(rèn)的checkbox和Radiobox樣式實(shí)在是比較丑陋了，今天分享一款非常個(gè)性化的CSS3自定義checkbox和Radiobox，外觀非常時(shí)尚。之前也分享過幾款類似的CSS3插件，比如HTML5自定義Checkbox和Radiobox、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式。

在線演示        源碼下載

7、CSS3實(shí)現(xiàn)自定義Checkbox動(dòng)畫

我們?cè)?span id="xhhjn7xljfrd" class="wp_keywordlink" style="font-size:14px;border-top:0px;border-right:0px;vertical-align:baseline;border-bottom:0px;padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;border-left:0px;padding-right:0px;">html5tricks網(wǎng)站上分享過很多的CSS3自定義checkbox，改造過的checkbox確實(shí)比默認(rèn)的漂亮。今天我們要再來分享一款CSS3自定義checkbox，而且這款checkbox還帶有動(dòng)畫效果，當(dāng)你選中checkbox的時(shí)候，會(huì)以動(dòng)畫的方式打上一個(gè)大大的勾。

在線演示        源碼下載

8、jQuery實(shí)現(xiàn)美化版的單選框和復(fù)選框

之前我們分享過一款CSS3自定義發(fā)光radiobox單選框，也在很早的時(shí)候分享過一款純CSS3美化Checkbox和Radiobox按鈕。今天這款是利用jQuery實(shí)現(xiàn)的美化版單選框和復(fù)選框，樣式風(fēng)格非常簡(jiǎn)潔清爽，是一款很不錯(cuò)的jQuery按鈕插件。

在線演示        源碼下載

9、CSS3自定義Checkbox 5種炫酷效果

今天又要來分享關(guān)于美化checkbox的CSS3應(yīng)用了，這次要分享的自定義checkbox一共有5種不同的炫酷效果，其實(shí)現(xiàn)也和之前分享的幾款HTML5自定義Checkbox和Radiobox 很酷的選中動(dòng)畫、CSS3漂亮的自定義Checkbox復(fù)選框 9款迷人樣式類似，也是利用定義label樣式來實(shí)現(xiàn)的。

在線演示        源碼下載

10、HTML5自定義Checkbox和Radiobox 很酷的選中動(dòng)畫

瀏覽器自帶的checkbox和Radiobox的樣式不僅外觀丑陋，而且控制起來也不方便，特別是Checkbox在各個(gè)瀏覽器中的樣式都不同，今天我們來利用HTML5和CSS3技術(shù)來自定義Checkbox和Radiobox的樣式，特別是Checkbox，在選中的時(shí)候還有非?？岬倪x中動(dòng)畫。

在線演示        源碼下載

以上就是10個(gè)HTML5美化版復(fù)選框和單選框，歡迎收藏分享。