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

这是一款使用纯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 check</label></div>

单选框radio。

<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>

内联样式。

<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。

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

原文地址:https://www.cnblogs.com/punisher999/p/12003970.html

时间: 2024-10-04 12:06:32

纯CSS3 Material Design风格单选框和复选框的相关文章

微信小程序-修改单选框和复选框大小的方法

方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊. 整体来说zoom属性与transform:scale属性主要存在如下几点差异 1.zoom的缩放是相对于左上角的:而scale默认是居中缩放:2.zoom的缩放改变了元素占据的空间大小:而scale的缩放占据的原始尺寸不变,页面布局不会发生

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

android 单选框和复选框

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_heig

html与用户交互中单选框与复选框&amp;下拉列表中的情况

使用单选框.复选框,让用户选择 在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 typ

20151220学习内容:Web之单选框、复选框

单选框:RadioButton RadioButton中有个属性GroupName,当单选时,必须把各个选项的组名设成同一个 查看按钮是否选中:bool sex = RadioButton1.Checked; Label1.Text = sex.ToString(); 单选按钮列表:RadioButtonList 属性:RepeatDirection:横向或纵向 绑定数据: TextDataContext context = new TextDataContext(); RadioButtonL

点击文字选中单选框或复选框

在选择单选框或者复选框的时候,点击圆点或者方框不太好点,就有了点击文字选中的需求,之前一直想的是用js实现,后来发现一个比较方便的方法. 就是把选项和文字外加label标签,如: <label> <input type="radio" value="A" name="1">A.选项A </label> <label> <input type="radio" value=&q

使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看下面的例子: 语法: <input type="radio/checkbox" value="值" name="名称" checked="checked"/> 1.type: 当 type="radio&qu

CSS学习笔记三:自定义单选框,复选框,开关

一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 1 <body> 2 <div class="radio-1"> 3 <input type="radio" name="radio-1" id="radio-1-1"> 4 <label for="radio-1-1"></label