web之ios开关按钮
就是这个开关，代码是从weui上拷贝出来的。 至于weui自己百度吧 ^_^~
开关代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.weui_switch
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background: #DFDFDF;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
display: inline-block;
text-align: start;
}
.weui_switch:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #FDFDFD;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.weui_switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.weui_switch:checked {
border-color: #04BE02;
background-color: #04BE02;
}
.weui_switch:checked:before {
-webkit-transform: scale(0);
transform: scale(0);
}
.weui_switch:checked:after {
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
</head>
<body>
<input type='checkbox' class='weui_switch'>
</body>
</html>
web之ios开关按钮的更多相关文章
- 敬请贤者：WEB、IOS开发（2年以上经验，大专）；CTO、产品经理，运营专员 电商服装鞋饰买手（2年以上经验，服装或鞋类）；体验店店长 （2年以上经验，服装或鞋类） 工作地点：丰台南苑路；有意者小窗QQ2211788980 - V2EX
敬请贤者:WEB.IOS开发(2年以上经验,大专):CTO.产品经理,运营专员 电商服装鞋饰买手(2年以上经验,服装或鞋类):体验店店长 (2年以上经验,服装或鞋类) 工作地点:丰台南苑路:有意者小窗 ...
- 移动web在ios和android下点击元素出现阴影问题
移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...
- web中ios移动端软键盘收起后，页面内容留白不下滑
微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...
- 移动端Web开发,ios下 input为圆角
在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...
- iOS开关按钮UISwitch控件
开关按钮UISwitch 在ViewController.h里面 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #import <UIKit/UIKit ...
- web页面ios浏览器img图片的坑
大家都知道ios浏览器有个默认的内置事件,就是长按屏幕,会放大预览你点击的内容. 不同浏览器效果各异,有的浏览器弹出提示框,预览图片或保存图片.主要呈下面2中形式.体验最差的就是后者,会直接将页面中的 ...
- 仿IOS 开关按钮
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ios开关按钮
.al-toggle-button{ appearance: none; -webkit-appearance: none; position: relative; width: 52px; heig ...
- 那些年做过的 .NET Web 项目和 iOS 之路的一些思考
从2010年3月份出来工作到2015年初,做过的大大小小的 .NET Web 项目如下: (1)售楼系统产品 「Role: Team Member」 (2)中弘合同管理系统 「Role: ...
随机推荐
- 《think in python》学习-5
think in python -5 think in python -5 条件和递归 求模操作符% 用于整数,可以计算出第一个操作数除以第二个操作数的余数 7%3 #结果是2 求模操作符%有很多用途 ...
- JavaScript小知识点（一）
JavaScript 有3种方式定义对象 ① var i = { function-x:function{ //todo }}; 这是通过Json方式定义一个函数对象. ② function P ...
- html系列教程--link mark meta
<link> 标签:定义文档与外部资源的关系,常见的用途是链接样式表 demo: <link rel="stylesheet" type="text/c ...
- 在EBS中如何创建CUX_TOP
1.创建cux用户1.1.创建表空间SQL> conn / as sysdba;Connected.SQL> create tablespace CUXD datafile '/vis/d ...
- EBS R12 怎么修改APPS密码
apps 和 applsys 的口令 $> FNDCPASS apps/<apps password> 0 Y system/<system password> SYST ...
- Myeclipse 常用操作（待补充）
1.更改背景色 进入myeclipse工作区,选择window->Preferences->General->Editors->Text Editors->Backgro ...
- 关于Centos Linux系统安装Python的问题
由于最近在研究Python框架Django的使用,安装django扩展没有问题 新建项目 django-admin startproject projectName 如果什么都不修改或者直接创建一 ...
- 软件测试学习日志————round 1 some questions of two small programs
Below are four faulty programs. Each includes a test case that results in failure. Answer the follow ...
- mini KMS Activator v1.3破解激活microsoft Office 2010 RTM
利用mini KMS Activator v1.3破解激活microsoft Office 2010 RTM方法,只是为体验office而做测试使用的哦...大家觉得好就自觉购买正版去... 使用步骤 ...
- delphi 7中使用idhttp抓取网页 解决假死现象
在delphi 7中使用idhttp抓取网页,造成窗口无反应的假死状态.通过搜索获得两种方法. 1.写在线程中,但是调用比较麻烦 2.使用delphi 提供的idantifreeze(必须安装indy ...