前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【公共UI】纯CSS3 Material Design风格单选框和复选框

【公共UI】纯CSS3 Material Design风格单选框和复选框

作者头像
用户5997198
发布2019-10-11 12:03:08
8980
发布2019-10-11 12:03:08
举报
文章被收录于专栏:蚂蚁开源社区

简要教程

这是一款使用纯CSS3制作的MaterialDesign风格单选框和复选框插件。该插件只需引入指定的CSS文件,然后配合特定的HTML结构,就可以生成漂亮的MaterialDesign风格单选框和复选框。

使用方法

在页面中引入下面的文件。

代码语言:javascript
复制
<link rel="stylesheet" href="css/icheck-material.min.css" />
<link rel="stylesheet" href="css/icheck-material-custom.min.css" />   

HTML结构

复选框checkbox。

代码语言:javascript
复制
<div class="icheck-material-teal">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId">Click to check</label>
</div>

单选框radio。

代码语言:javascript
复制
<div class="icheck-material-teal">
    <input type="radio" id="someRadioId1" name="someGroupName" />
    <label for="someRadioId1">Option 1</label>
</div>
<div class="icheck-material-teal">
    <input type="radio" id="someRadioId2" name="someGroupName" />
    <label for="someRadioId2">Option 2</label>
</div>

内联样式。

代码语言:javascript
复制
<div class="icheck-material-teal icheck-inline">
    <input type="checkbox" id="chb1" />
    <label for="chb1">Label 1</label>
</div>
<div class="icheck-material-teal icheck-inline">
    <input type="checkbox" id="chb2" />
    <label for="chb2">Label 2</label>
</div>

无label。

代码语言:javascript
复制
<div class="icheck-material-teal">
    <input type="checkbox" id="someCheckboxId" />
    <label for="someCheckboxId"></label>
</div>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档