-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
阿萨
2018-03-20
来源 ：网络
阅读 926
评论 0
摘要：Radio和checkbox需要美化吗？这篇CSS+DIV实战教程告诉你答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。
Radio和checkbox需要美化吗？这篇CSS+DIV实战教程告诉你答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。
在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>
希望这篇文章可以帮助到你。总之，同学们，你想要的职坐标IT频道都能找到！
喜欢 | 1
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
