自定义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值之间切换,我 ...
随机推荐
- 模拟点击a链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- ZOJ 2476 Total Amount
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2476 Time Limit: 2 Seconds ...
- Java 集合 fail-fast机制 [ 转载 ]
Java 集合 fail-fast机制 [转载] @author chenssy 摘要:fail-fast产生原因.解决办法 在JDK的Collection中我们时常会看到类似于这样的话: 例如,Ar ...
- 大规模Schedule任务实现方案
package com.itlong.bjxizhan.support.web.job.base; import com.itlong.bjxizhan.common.DbContext; impor ...
- OMCS ——卓尔不群的网络语音视频框架
作为.NET平台上的开发人员,要开发出一个像样视频聊天系统或视频会议系统,非常艰难,这不仅仅是因为.NET对多媒体的支持比较有限,还因为网络语音视频这块涉及到了很多专业方面的技术,而.NET在这些方面 ...
- error LNK2001:unresolved external symbol "xxx:static xxx"
一般是在类的头文件里定义了某个static变量而没有在类的 Implemention 里去初始化(也许不是这么称呼)这个变量. 比如在 xxdlg.h 中写了如下代码 1: class CxxDlg ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 什么是JDBC？
JDBC是Java数据库连接(Java DataBase Connectivity)技术的简称,提供连接各种常用数据库的能力! 1.方式一(配置文件实现): <!-- 1. 连接池实例 --&g ...
- YaHoo Web优化的14条法则
Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在. 法则1. 减少HTTP请求次数 80%的最终用户响应时间花在前端程序上,而其 ...
- js 总结累计大全
1选择 select 获取val text 更改其他class值 <script type="text/javascript"> $(function(){ $ ...