你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
forsigner

用纯CSS美化radio和checkbox 9个回复 专栏 @ CSS

forsigner 发布于 1 年前

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>
  • BelinChung

    兼容性如何?

    #1
  • 树上有云

    兼容性如何?

    #2
  • fish

    用 after before 模拟实现的,我试了下兼容到 IE9.

    #3
  • linxz
    <input class="magic-checkbox" type="checkbox" name="layout" id="1" value="option1">
    <label class="pull-right" for="1"></label>
    

    我承认我是来吐槽的,id这样用真的好么……这样一个东西,还去安装node什么的,真的好么。刚开始我以为是教程,结果发现不是,感觉这个东西挺折腾的,兼容性反正是有问题,然后用了这个这个后,反而增加了很多需要考虑的点。

    如果要考虑兼容性的话,那么就肯定不是用:after:before了……直接用label来操作,或者嵌套一个span什么的。

    #4
  • 409551433

    @linxz +1

    #5
  • forsigner

    @linxz @409551433 用 :before 和 :after 确实不好,准备用opacity来重构,这样兼容性和灵活性户好跟多

    #6
  • forsigner

    @BelinChung @树上有云 正如 @fish 说的,兼容到IE9

    #7
  • forsigner

    @linxz 刚更新,新版本我已经移除了对 ID 和 label 的依赖,用纯CSS的好处是,当你用Angular、Vue、React时不用再次封装。当然因为不兼容地本版IE是个问题,但也有其使用场景,很多项目已经不兼容IE8,例如 Angular2 和新本 React

    #8
  • wangdaodao

    用透明的方式来处理,兼容性问题应该很容易解决了,还有select……

    #9
登录后回复,如无账号,请使用邀请码注册