资讯专栏INFORMATION COLUMN

纯CSS3美化 input 的checkbox 和 radio

lsxiao / 1462人阅读

摘要:样式复选框和单选按钮看起来更漂亮。在线源码使用你需要引入或者文件到你的工程或者中。

magic-input

CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo
源码:https://github.com/jaywcjlove/magic-input

使用
$ npm install magic-input

你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以使用 magic-input.styl 文件

Checkbox iPhone 的样式



Checkbox

 Default
 Primary
 Success
 Info
 Warning
 Danger
Radios

 Default
 Primary
 Success
 Info
 Warning
 Danger
设置input大小的class

smsmall的缩写 , lglarge缩写

在 Checkbox中设置下面class

mgc-sm mgc-lg

在 Radio Button中设置下面

mgr-sm mgr-lg

改变颜色的 Class

在 Checkbox中设置下面class

mgc-primary mgc-info mgc-success mgc-warning mgc-danger

在 Radio Button中设置下面
mgr-primary mgr-info mgr-success mgr-warning mgr-danger

关注公众号

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

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

相关文章

  • CSS3美化 input checkbox radio

    摘要:样式复选框和单选按钮看起来更漂亮。在线源码使用你需要引入或者文件到你的工程或者中。 magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码:https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...

    PascalXie 评论0 收藏0
  • CSS3美化 input checkbox radio

    摘要:样式复选框和单选按钮看起来更漂亮。在线源码使用你需要引入或者文件到你的工程或者中。 magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码:https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...

    flyer_dev 评论0 收藏0
  • 总结:如何修改美化radiocheckbox默认样式

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

    asce1885 评论0 收藏0
  • 总结:如何修改美化radiocheckbox默认样式

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

    Anshiii 评论0 收藏0
  • 总结:如何修改美化radiocheckbox默认样式

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

    bergwhite 评论0 收藏0

发表评论

0条评论

lsxiao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<