<!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. ngSanitize和$sce

    (angular-ngSanitize模块-$sanitize服务详解) 本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一 ...

  2. 耿丹CS16-2班第二次作业汇总

    -- Deadline: 2016-09-28 12:00 -- 作业内容:http://www.cnblogs.com/huangjunlian/p/5891726.html -- 第二次作业总结: ...

  3. word20161217

    p-node / p 节点 package / 程序包 packet / 数据包 packet assembler/disassembler, PAD / 分组拆装器 packet header / ...

  4. 读一篇Javascript问题贴的收获

    遇到这篇文章<Javascript异步调用时,回调函数内用到了函数外的变量>,是缘于我在<难道这就是JavaScript中的"闭包">文章中遇到的问题时,B ...

  5. Python flask @app.route

    转载自 http://python.jobbole.com/80956/ 下面是Flask主页给我们的第一个例子,我们现在就由它入手,深入理解“@app.route()”是如何工作的.         ...

  6. .NET+IIS+MSSQL配置

    好久没配置.NET+IIS+MSSQL了,跟以前不大一样了.总结下吧. 环境: Windows Server 2012 标准版 x64 SQL Server Express 2014 一.HTTP E ...

  7. Python3.4下安装pip和MySQLdb

    想用pyhton3.4做数据分析,pip和MySQLdb是必要的,一个便于安装常用模块,一个用来操作数据库.当时安装这两个模块时,由于没有人指导,花了很多的时间才安装好. 安装pip时,按照网上的教程 ...

  8. 读取Simulink中Dataset类型的数据

    http://files.cnblogs.com/files/pursuiting/%E5%80%92%E7%AB%8B%E6%91%86%E6%8E%A7%E5%88%B6%E7%B3%BB%E7% ...

  9. js学习进阶中-bind()方法

    有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...

  10. centos7.0 安装redis集群

    生产环境下redis基本上都是用的集群,毕竟单机版随时都可能挂掉,风险太大.这里我就来搭建一个基本的redis集群,功能够用但是还需要完善,当然如果有钱可以去阿里云买云数据库Redis版的,那个还是很 ...