checkBox 开关按钮
<!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 开关按钮的更多相关文章
- SwitchButton 开关按钮 的多种实现方式
刚开始接触开关样式的按钮是在IOS系统上面,它的切换以及滑动十分帅气,深入人心. 所谓的开关按钮,就是只有2个状态:on和off,下图就是系统IOS 7上开关按钮效果. 起初我在android上我只会 ...
- css设置移动端checkbox和radio样式
复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...
- 基于Bootstrap的jQuery开关按钮插件
按钮 下载 使用方法 首先要在页面中引入依赖文件: jquery.Bootstrap.Bootstrap Switch CSS和Bootstrap Switch JS.这里用的是bootstr ...
- Android——复选按钮和开关按钮
复选按钮和开关按钮代码如下: <LinearLayout android:layout_width="match_parent" android:layout_height= ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
- 基于Bootstrap的jQuery开关按钮组合
Bootstrap是一款由Twitter推出的开源前端开发包,功能非常强大.今天我们要分享的这款jQuery开关按钮组合就是基于Bootstrap框架的,看了按钮的主题样式,也都是Bootstrap的 ...
- 状态开关按钮（ToggleButton）及按钮(Swich)的使用
状态开关按钮(ToggleButton)和开关(Switch)也是由Button派生出来的,因此它们本质上都是按钮,Button支持的各种属性.方法也适用于ToggleButton和Switch.从功 ...
- 第19讲- UI组件之_Button、checkbox、radio
第19讲 UI组件之_Button.checkbox.radio 四.按钮Button Button继承自TextView,间接继承自View.当用户对按钮进行操作的时候,触发相应事件,如点击,触摸. ...
- [转]C#自定义开关按钮控件--附带第一个私活项目截图
原文地址:http://www.cnblogs.com/feiyangqingyun/archive/2013/06/15/3137597.html 进入智能手机时代以来,各种各样的APP大行其道,手 ...
随机推荐
- VB常用字符串操作函数
1. ASC(X),Chr(X):转换字符字符码 [格式]: P=Asc(X) 返回字符串X的第一个字符的字符码 P=Chr(X) 返回字符码等于X的字符 [范例]: (1)P=Chr(65) ‘ 输 ...
- C和指针 第十五章 文件I/O
stdio.h中包含了声明FILE结构 struct _iobuf { char *_ptr; //文件输入的下一个位置 int _cnt; //当前缓冲区的相对位置 char *_base; //指 ...
- AngularJS下拉列表select在option动态变化之后多出了一个错误项的问题
场景: Select初始化之后,选中select的某个选项 通过AngularJS更新select的选项 错误写法: HTML(使用ng-repeat) <div ng-app="Te ...
- 【新手总结】在.Net项目中使用Redis作为缓存服务
最近由于项目需要,在系统缓存服务部分上了redis,终于有机会在实际开发中玩一下,之前都是自己随便看看写写,很零碎也没沉淀下来什么,这次算是一个系统学习和实践过程的总结. 和Redis有关的基础知识 ...
- Gerrit增加SSL证书
在http的基础上增加SSL 配置gerrit.config文件 [gerrit] basePath = git canonicalWebUrl = https://172.16.99.212/ .. ...
- Linux下的压缩和解压缩命令——tar
tar命令 选项: -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只 ...
- python之路十三
前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多人觉得,堡垒机就是跳板机,其实这个认识是不全面的,跳板功能只是堡垒机所具备的功能属性中的其中 ...
- 最新版 chrome 33中,backgroundPosition 改了.
ctrl.css('backgroundPosition' 返回值不一样, 原来是:-75px 0px 现在是:left 75px top 0px // chrome 33 返回的是 left 0px ...
- curl及postman专题
一. 步骤 1: 下载cURL工具 使用您的Windows机器从cURL web站点下载最新版本的cURL: (1) 通常情况下,多数的Windows用户可以从官网下载页面http://curl.ha ...
- VMWARE修改CPUID
在cmd shell下执行wmic cpu get ProcessorId命令,可是查看机器的cpuID,但这个命令显示的只是2组ID,实际CPUID,有4组 通过更改虚拟机配置文件.vmx可是实现任 ...