<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0px;padding:0px;}
.box{
width:980px;
height:100px;
background: #c7ddef;
margin:0 auto;
line-height: 100px;
text-align: center;
}
label{
display: inline-block;
width:60px;
height:30px;
background: #fff;
border-radius:30px;
position: relative;
cursor: pointer;
transition: background-color .1s ease-out;
box-shadow:1px 1px 3px rgba(100,100,100,0.6);
/*pointer-events: none;//禁止当前元素所有触发动作*/
}
label:after{
content:'';
position: absolute;
left:0;
height:28px;
top:1px;
background: #cccccc;
width:28px;
border-radius:50%;
cursor: pointer;
transition: left .1s ease-out;
/*pointer-events: auto;//其子元素放开限制，*/
}

input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked + label{
background: #ff5a5a;
transition: background-color .1s ease-in;
}
input[type=checkbox]:first-child:checked + label{
background: #f39c12;
transition: background-color .1s ease-in;
}
input[type=checkbox]:checked + label:last-child{
background: #1abc9c;
transition: background-color .1s ease-in;
}
input[type=checkbox]:checked + label:after{
background: #fff;
left:32px;
transition: left .1s ease-in;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" id="l1" name="button"/>
<label for="l1"></label>
<input type="checkbox" id="l2" name="button"/>
<label for="l2"></label>
<input type="checkbox" id="l3" name="button"/>
<label for="l3"></label>
</div>
</body>
</html>

checkBox 开关按钮的更多相关文章

  1. SwitchButton 开关按钮 的多种实现方式

    刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心. 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果. 起初我在android上我只会 ...

  2. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

  3. 基于Bootstrap的jQuery开关按钮插件

        按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...

  4. Android——复选按钮和开关按钮

    复选按钮和开关按钮代码如下: <LinearLayout android:layout_width="match_parent" android:layout_height= ...

  5. 基于Bootstrap的超酷jQuery开关按钮插件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD

  6. 基于Bootstrap的jQuery开关按钮组合

    Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...

  7. 状态开关按钮（ToggleButton）及按钮(Swich)的使用

    状态开关按钮(ToggleButton)和开关(Switch)也是由Button派生出来的,因此它们本质上都是按钮,Button支持的各种属性.方法也适用于ToggleButton和Switch.从功 ...

  8. 第19讲- UI组件之_Button、checkbox、radio

    第19讲 UI组件之_Button.checkbox.radio 四.按钮Button Button继承自TextView,间接继承自View.当用户对按钮进行操作的时候,触发相应事件,如点击,触摸. ...

  9. [转]C#自定义开关按钮控件--附带第一个私活项目截图

    原文地址:http://www.cnblogs.com/feiyangqingyun/archive/2013/06/15/3137597.html 进入智能手机时代以来,各种各样的APP大行其道,手 ...

随机推荐

  1. windows7 gvim 配置（好用）

    http://blog.csdn.net/anders_zhuo/article/details/8949003

  2. 手机站使图片高度统一jq代码

    <script> function showImg(){ $(".honor_i_c img").each(function(index, element) { var ...

  3. Linux less 命令

    - less 打开文件后: shift + g 转至文件末尾 g 转至文件开头 搜索字段(/<pattern>)后: n 转至下一个匹配的字段 shift + n 转至上一个匹配的字段 同 ...

  4. 用Burpsuite破解网站密码

    burpsuite专业版 一个网站 方法/步骤   1 切换至proxy选项卡的Option选项下,设置代理地址和端口:127.0.0.1:8080. 2 启动刚刚设置的代理 3 打开Internet ...

  5. VS2013全攻略

    http://blog.csdn.net/cpp12341234/article/details/45371269 挺好的,喜欢

  6. 使用visual studio 调试android 程序 ,真机调试

    1 使用visual studio 2015 新建 blank android APP , 2 安卓手机调整到开发者模式 3 通过USB链接到PC 4 自动检测 设备(这一步貌似没有立即检测到真机设备 ...

  7. 【mongo】聚合相关资料

    一个很好的博客:http://www.cnblogs.com/shanyou/p/3494854.html 官网:https://docs.mongodb.com/manual/reference/o ...

  8. JS中的if和else的用法以及基础语法

    正常里的变量方式.var a = 10; 针对整数.var b = 3.14; 针对的小数点.var c = "你好":双引号或者单引号引起来的是定义字符串. 一.类型转换(强制转 ...

  9. .net WebApi开发

    1].部署环境.net4及以上版本. [2].vs2010  开发需单独安装vs2010 sp1和mvc4 mvc4:http://www.asp.net/mvc/mvc4 或者 http://dow ...

  10. response生成图片验证码

    新建一个java web工程 src 目录下xieyuan包MyServlet.java文件(Servlet文件) package xieyuan; import java.awt.Color; im ...