自定义switch开关
自定义一个switch开关
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>theSwitch</title>
<style>
.label-switch {
}
#checkBox {
display: none;
}
.checkBox {
width: 52px;
height: 32px;
border-radius: 16px;
box-sizing: border-box;
background: #d8d8d8;
position: relative;
}
#checkBox:checked + .checkBox {
background: #00b4ff;
}
#checkBox:checked + .checkBox::before {
transform: translateX(22px);
transition-duration: 300ms;
}
.checkBox::before {
width: 28px;
height: 28px;
border-radius: 28px;
background: #ffffff;
position: absolute;
top: 2px;
left: 1px;
content: " ";
transform: scale(1);
box-sizing: border-box;
transform: translateX(0);
transition-duration: 300ms;
}
</style>
</head>
<body>
<label class="label-switch">
<input type="checkbox" id="checkBox"/>
<div class="checkBox" for="checkBox"></div>
</label>
</body>
</html>
自定义switch开关的更多相关文章
- vue自定义switch开关，使用less支持换肤
实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...
- 自定义常用input表单元素三：纯css实现自定义Switch开关按钮
自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...
- mui的switch开关的应用
HTML: <!--mui的switch开关--> <div class="mui-content-padded"> <h5>switch开关m ...
- CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
- 使用css3 制作switch开关
使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...
- 微信小程序组件解读和分析：十五、switch 开关选择器
switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...
- elementui switch 开关，点击确认按钮后在进行开关
<el-table-column label="上头条" align="center"> <template slot-scope=" ...
- 微信小程序 主题皮肤切换（switch开关）
示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...
- mui switch(开关)里面token不能及时更新
做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...
随机推荐
- FZU 1502 Letter Deletion(DP)
Description You are given two words (each word consists of upper-case English letters). Try to delet ...
- Web程序和应用程序服务器[转]
转自:http://hi.baidu.com/lclkathy/blog/item/dae3be36763a47370b55a970.html 一 常见的WEB服务器和应用服务器 在UNIX和LINU ...
- 【Flash ANE iOS】关于Flash ANE在iOS上面遇到的一些问题
1.下载Flash Builder: https://www.adobe.com/support/downloads/detail.jsp?ftpID=5516 2.如何生成p12文件: http:/ ...
- POJ 3020 Antenna Placement（无向二分图的最小路径覆盖）
(￣▽￣)" //无向二分图的最小路径覆盖数=顶点总数-最大匹配数/2(最大匹配数=最小点覆盖数) //这里最大匹配数需要除以2,因为每两个相邻的*连一条边,即<u,v>和< ...
- 向openwrt 源码添加ap143支持
借鉴地址:http://www.pppei.net/blog/post/536 1.向文件 \target\linux\ar71xx\generic\profiles\atheros.mk 中添加ap ...
- Gentoo本地化设置--时区、时钟、字体、中文环境
时区 你需要选择时区让系统知道你的地理位置,以保持正确的时间.在/usr/share/zoneinfo中查找你的时区.然后在/etc/conf.d/clock中设置时区.请忽略/usr/share/z ...
- Android应用测试性能的工具Emmagee，导出文件格式问题分析
原文引用自:http://www.open-open.com/lib/view/open1367026451078.html Emmagee是监控指定被测应用在使用过程中占用机器的CPU.内存.流量资 ...
- 【简单学习shell】iptables命令实用
构造设备离线iptables命令iptables -I INPUT -p all -s 10.71.115.159 -j DROP 断链iptables -I INPUT -p all -s 10.7 ...
- 29．编写一个Java应用程序，设计一个汽车类Vehicle，包含的属性有车轮个数 wheels和车重weight。小车类Car是Vehicle的子类，其中包含的属性有载人数 loader。卡车类Truck是Car类的子类，其中包含的属性有载重量payload。每个 类都有构造方法和输出相关数据的方法。最后，写一个测试类来测试这些类的功 能。
//Vehicle类 package d922A; public class Vehicle { private int wheels; private double weight; Vehicle( ...
- Hadoop作业优化
mapper数量 reduce数量 combiner 中间值压缩 自定义序列 调整shuffle,减少溢出写 关闭推测执行 任务JVM重用 慢启动reduce