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