纯CSS3 Material Design风格单选框和复选框

2021-05-12 21:27

阅读：653

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

该纯CSS3 Material Design风格单选框和复选框的github地址为：https://github.com/bantikyan/icheck-material

Demo源码下载地址：https://tc5.us/file/21793581-403946075

Demo截图：

没有截图你看错了

使用方法

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

link rel="stylesheet" href="css/icheck-material.min.css" />
link rel="stylesheet" href="css/icheck-material-custom.min.css" />

复选框checkbox。

div class="icheck-material-teal">
input type="checkbox"id="someCheckboxId" />
label for="someCheckboxId">Click to checklabel>div>

单选框radio。

div class="icheck-material-teal"> input type="radio" id="someRadioId1" name="someGroupName" />

label for="someRadioId1">Option 1label>div>div class="icheck-material-teal">

input type="radio" id="someRadioId2" name="someGroupName" /> label for="someRadioId2">Option 2label>div>

内联样式。

div class="icheck-material-teal icheck-inline"> 
   input type="checkbox" id="chb1" /> 
   label for="chb1">Label 1label>
div>
div class="icheck-material-teal icheck-inline"> 
   input type="checkbox" id="chb2" /> 
   label for="chb2">Label 2label>
div>

无label。

div class="icheck-material-teal"> 
　　input type="checkbox" id="someCheckboxId" /> 
　　label for="someCheckboxId">label>
div>

上一篇：svn+apache搭建版本控制服务器

下一篇：cdh的web管理界面503

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：纯CSS3 Material Design风格单选框和复选框
文章链接：http://soscw.com/index.php/essay/84854.html

亲，登录后才可以留言！

纯CSS3 Material Design风格单选框和复选框

使用方法

评论

热门文章

推荐文章

最新文章

置顶文章