Switch按钮
使用CSS+HTML5修改原生checkbox为Switch Button
.switch {
width: 45px;
height: 15px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #c6cacd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
}
.switch:before {
content: '';
width: 16px;
height: 15px;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch:checked {
border-color: #64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
}
.switch:checked:before {
left: 30px;
}
.switch.switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch.switch-anim:before {
transition: left 0.3s;
}
.switch.switch-anim:checked {
box-shadow: #5fa7fb 0 0 0 16px inset;
background-color: #5fa7fb;
transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
}
.switch.switch-anim:checked:before {
transition: left 0.3s;
}
.switch:focus{
outline: none !important;
border: none !important;
}
<input class="switch switch-anim" style="border:0" type="checkbox" '+ checked +' onchange="checkNum(this)"></div>
效果:
Switch按钮的更多相关文章
- 小程序 switch按钮
<view class='pay-switch'> <switch color='#1F3238' data-gongprice='{{gongprice}}' data-disco ...
- ToggleButton与Switch
状态开关按钮togglebutton和开关switch 状态开关按钮togglebutton和开关switch是由button派生出来的,本质也是按钮,支持BUtton的各种属性,从功能上看,Togg ...
- 状态开关按钮(ToggleButton)及按钮(Swich)的使用
状态开关按钮(ToggleButton)和开关(Switch)也是由Button派生出来的,因此它们本质上都是按钮,Button支持的各种属性.方法也适用于ToggleButton和Switch.从功 ...
- iOS自定义的UISwitch按钮
UISwitch开关控件 开关代替了点选框.开关是到目前为止用起来最简单的控件,不过仍然可以作一定程度的定制化. 一.创建 UISwitch* mySwitch = [[ UISwitchalloc] ...
- 状态开关按钮(ToggleButton)与开关(Switch)的功能与用法
状态开关按钮(ToggleButton)与开关(Switch)也是由Button派生出来的,因此它们的本质也是按钮,Button支持的各种属性.方法也适用于ToggleButton和Switch.从功 ...
- 【Android 应用开发】Android - 按钮组件详解
总结了Android中常用的按钮用法 示例源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6852091 -- GitHu ...
- bootstrap switch样式修改与多列等间距布局
先以一张图开启今天的随笔 今天实习遇到了switch按钮,小姐姐说用插件bootstrap switch来写,我第一次用这个插件,首先在引入方面就遇到了很多坑,先来总结一下bootstrap swit ...
- Android - 按钮组件详解
总结了Android中常用的按钮用法 示例源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6852091 -- GitHu ...
- iOS-UI-UI控件概述
以下列举一些在开发中可能用得上的UI控件: IBAction和IBOutlet,UIView 1 @interface ViewController : UIViewController 2 3 @p ...
随机推荐
- 机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总
<Brief History of Machine Learning> 介绍:这是一篇介绍机器学习历史的文章,介绍很全面,从感知机.神经网络.决策树.SVM.Adaboost到随机森林.D ...
- Connect4 Game
How this game is playe can be found at here. public class Connect4 { ][]; public Connect4(char[][] b ...
- 汉诺塔递推HDU2064
题意: 移动木头盘不能a到c,必须a到b到c. 问你移动次数. 假设将n层塔从A经B挪到C需要f[n]步.那么具体的移动过程可以这样看:将上面n-1层从A经B挪到C需要f[n-1]步,再将第n层从A挪 ...
- 第十章 MIZ702 ZYNQ制作UBOOT固化程序
10.0难度系数★☆☆☆☆☆☆ 10.1是什么是固化 我们前几章将的程序都是通过JTAG先下载bit流文件,再下载elf文件,之后点击Run As来运行的程序.JTAG的方法是通过TCL脚本来初始化P ...
- hdu 3500 还是搜索
这道题目由于每走一步的时候毛毛球是可以变换的 换言之 主体不唯一 所以这里搜索的设计有变化 再就是几个回溯的过程要注意.,. 小心使得万年船 #include <iostream> #i ...
- vue添加图片
首先开始创建一个 static 文件夹用来保存图片 去 setting 里面进行配置 MEDIA_ROOT = os.path.join(BASE_DIR,'media') #前面大写的是死格式,尽量 ...
- python 读取文件行
将文件转化成二进制码,并读取行数,计算总行数 import os Str=input("请输入路径") Sum=0 def read(Str): a = os.listdir(St ...
- SQL生成自动序号 带有占位符(掩码),可以调整占位长度的语句
MSSQL 语句 --声明变量 DECLARE @i int DECLARE @xh varchar(10) DECLARE @name varchar(10) Set @i = 0 --开始循环插入 ...
- arcgis js之地图分屏同步
arcgis js之地图分屏同步 原理: 新建两个map两个view或者一个map两个view.对地图进行移动事件绑定,在地图移动时同步地图方位 代码: views.forEach((view) =& ...
- vue项目js实现图片放大镜功能
效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...