用純CSS美化radio和checkbox

Radio和checkbox需要美化嗎？答案是必須的，因為設計風格一直都會變化，原生的樣式百年不變肯定滿足不了需求。

先看看純CSS美化過后的radio和checkbox效果： 查看 。

項目地址： magic-check

在CSS出現之前，我們美化radio和checkbox需要借助JavaScript，最具代表性的就是 icheck ，它功能強大復雜并且主題很多。icheck這種美化方案很好很強大，但是也有很多缺點：

• 太重，需要引入JS、CSS，還有圖片或者字體圖標，而且還依賴jQuery

• 擴展性差，Pure js項目還好，如果是Angular.js、React、Vue.js或者Meteor項目，一般都需要自己對icheck做wrapper

• 樣式自定義性不好，修改樣式只能重新做圖

• 事件行為跟原生不一致

• 可維護性差、復雜，誰用誰知道

所以，如果的項目不需兼容古董瀏覽器的話，用CSS美化radio和checkbox是最好的選擇，這樣什么都不用依賴，只需CSS，無JS，無圖片，無字體圖標。

為了更好的在項目中重用，我把美化的代碼寫成一個項目，叫 magic-check ，寓意像魔法一樣去美化radio和checkbox。

用法非常簡單，最好用Bower和npm進行管理，先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元素加上一個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>