<!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. html页面读取PDF小案例

    html页面 引用<script src="js/pdfobject.js" type="text/javascript" charset="u ...

  2. JSON格式序列化与反序列化(List、XML)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...

  3. JQuery动画队列问题

    在上网的时候经常会发现一些网站上发现一些bug,如导航菜单的动画队列问题(在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画 会被放到动画队列中,等前面的动画执行完成了才会执行) 要解决问题 ...

  4. ASP.NET运作流程

    当我们在浏览器输入域名访问服务器资源时,会向服务器发送Http请求,并经由IIS处理后,交由ASP.NET托管程序处理,进入ASP.NET管道.在IIS内部如何处理我们不需要深入去了解,在ASP.NE ...

  5. django rest framework 再撸体验

    曾经了解过. 放在一边,嫌麻烦. 如今身为leader,站在团队沟通的角度看看,还不错. 有几个优点: 1. api一览表 2. api web预览界面(类似.net的webservice预览界面), ...

  6. typeScence

  7. win10 设置声卡驱动 --- 解决喇叭没有声音！

    win10 设置声卡驱动 --- 解决喇叭没有声音! 1)安装驱动,必须能够在:"控制面板\硬件和声音" 下找到安装好的: "Realtek高清晰音频管理器" ...

  8. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height

  9. javascript export excel

    <input type="button" onclick="tableToExcel('tablename', 'name')" value=" ...

  10. 【python】安装指定模块

    使用pip 1.卸载模块 sudo pip uninstall xxx 2.安装指定版本模块 sudo pip install xxx==2.0.1.3