资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/纯CSS3美化 input 的checkbox 和 radio

纯CSS3美化 input 的checkbox 和 radio

flyer_dev / 1778人阅读

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

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

sm 是 small的缩写 , lg 是 large缩写

在 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

关注公众号

GPU云服务器 云服务器 BUTTON和INPUT的区别 html的radio html的美化 美化视频的手机软件

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

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

相关文章

  • 纯CSS3美化 input 的checkbox 和 radio

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

    lsxiao 评论0 收藏0

  • 总结：如何修改美化radio、checkbox的默认样式

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

    asce1885 评论0 收藏0

  • 总结：如何修改美化radio、checkbox的默认样式

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

    Anshiii 评论0 收藏0

发表评论

登陆后可评论

0条评论

flyer_dev

男|高级讲师
我要私信

TA的文章

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