Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計(jì)風(fēng)格一直都會(huì)變化，原生的樣式百年不變肯定滿足不了需求。
先看看純CSS美化過(guò)后的radio和checkbox效果：查看。
項(xiàng)目地址：magic-check
在CSS出現(xiàn)之前，我們美化radio和checkbox需要借助JavaScript，最具代表性的就是icheck，它功能強(qiáng)大復(fù)雜并且主題很多。icheck這種美化方案很好很強(qiáng)大，但是也有很多缺點(diǎn)：
- 太重，需要引入JS、CSS，還有圖片或者字體圖標(biāo)，而且還依賴jQuery
- 擴(kuò)展性差，Pure js項(xiàng)目還好，如果是Angular.js、React、Vue.js或者M(jìn)eteor項(xiàng)目，一般都需要自己對(duì)icheck做wrapper
- 樣式自定義性不好，修改樣式只能重新做圖
- 事件行為跟原生不一致
- 可維護(hù)性差、復(fù)雜，誰(shuí)用誰(shuí)知道
所以，如果的項(xiàng)目不需兼容古董瀏覽器的話，用CSS美化radio和checkbox是最好的選擇，這樣什么都不用依賴，只需CSS，無(wú)JS，無(wú)圖片，無(wú)字體圖標(biāo)。
為了更好的在項(xiàng)目中重用，我把美化的代碼寫成一個(gè)項(xiàng)目，叫magic-check，寓意像魔法一樣去美化radio和checkbox。
用法非常簡(jiǎn)單，最好用Bower和npm進(jìn)行管理，先Install：
- bower:
bower install --save magic-check - npm:
npm install --save magic-check
然后加載CSS文件：
<link rel="stylesheet" href="bower_components/magic-check/css/magic-check.css">
然后，只要給input元素加上一個(gè)CSS類magic-checkbox或magic-radio就可以：
** Radio**
<input class="magic-radio" type="radio" name="radio" id="11">
<label for="11">Normal</label>
** Checkbox**
<input class="magic-checkbox" type="checkbox" name="layout" id="1">
<label for="1">Normal</label>
