用純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>