用纯CSS美化radio和checkbox

Donne 发布于2019-08-19 17:37 / 2343人阅读

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。

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文件：

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

Radio

 
Normal

Checkbox

 
Normal

混合云服务器托管 asp网页美化css css和html html和css css和div

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78699.html

用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

terro 2019-08-30 12:47 评论0 收藏0
用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

pekonchan 2019-08-02 18:30 评论0 收藏0
用纯CSS美化radio和checkbox

摘要：先看看纯美化过后的和效果查看。项目地址在出现之前，我们美化和需要借助，最具代表性的就是，它功能强大复杂并且主题很多。为了更好的在项目中重用，我把美化的代码写成一个项目，叫，寓意像魔法一样去美化和。 Radio和checkbox需要美化吗？答案是必须的，因为设计风格一直都会变化，原生的样式百年不变肯定满足不了需求。先看看纯CSS美化过后的radio和checkbox效果：查看。项目地...

rubyshen 2019-08-01 15:04 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 评论0 收藏0