转载

用纯CSS美化radio和checkbox

Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。

先看看纯CSS美化过后的radio和checkbox效果：查看。

项目地址： magic-check

在CSS出现之前，我们美化radio和checkbox需要借助JavaScript，最具代表性的就是 icheck ，它功能强大复杂并且主题很多。icheck这种美化方案很好很强大，但是也有很多缺点：

所以，如果的项目不需兼容古董浏览器的话，用CSS美化radio和checkbox是最好的选择，这样什么都不用依赖，只需CSS，无JS，无图片，无字体图标。

为了更好的在项目中重用，我把美化的代码写成一个项目，叫 magic-check ，寓意像魔法一样去美化radio和checkbox。

用法非常简单，最好用Bower和npm进行管理，先Install：

然后加载CSS文件：

<link rel="stylesheet" href="bower_components/magic-check/css/magic-check.css">

然后，只要给input元素加上一个CSS类magic-checkbox或magic-radio就可以：

<input class="magic-radio" type="radio" name="radio" id="11">  <label for="11">Normal</label>

<input class="magic-checkbox" type="checkbox" name="layout" id="1">  <label for="1">Normal</label>

原文 https://segmentfault.com/a/1190000004453750

正文到此结束

所属分类：编程技术

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。