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>