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: ...
随机推荐
- MVC5 Controller简要创建过程（1）：ControllerFactory的创建
即将离职,闲来无事回顾下MVC的源码,到了Controller创建这里,由于流程有点复杂,鉴于自己记性不太好,索性就记录一下吧,方便日后参照. 首先看MvcHandler: public class ...
- Android之ActionBar学习
关于那个问题:是关于如何生成如下图所示之ActionBar效果: 其实就在官网上就有答案,自己疏忽再加上资料繁多.寻了许久,经过指点.终于找到: To enable split action bar, ...
- 让ie支持placeholder属性，一段js搞定
placeholder属性真的是超级好用的新属性,可惜,只有新版浏览器才支持,为了写出输入框贴心提示,老方法就是加span标签覆盖,营造出placeholder提示的感觉,现在安利一款好用的js,好用 ...
- html系列教程--embed fieldset legend figure figurecaption
<embed> 标签:定义嵌入的内容 <embed src="" type="" /> embed属性: 1.src:嵌入内容地址 2. ...
- SQL Server 2008如何导出带数据的脚本文件
第一步,选中需要导出脚本的数据库,右键选中 第二步,选取弹出菜单中的任务-生成脚本选项(会弹出一SQL生成脚本的向导) 第三步,在向导中点击下一步,弹出选择数据库界面(默认是自己之前选中的数据库),把 ...
- Unity3D使用mesh创建一个正方形
using UnityEngine; using System.Collections; public class Quad : MonoBehaviour { // Use this for ini ...
- xcode7 没有Empty Application
如果你想创建xcode6.01之前版本提供的空工程,其实很简单.1:选择模板 Single View Application2:选中 Main.storyboard,将其删除3:选择项目的 plist ...
- Java学习之System.arraycopy()方法
java.lang.System的静态方法arraycopy()可以实现数组的复制,讲课的老师说这个方法效率比较高,如果数组有成千上万个元素,那么用这个方法,比用for语句循环快不少.System提供 ...
- Mysql中时间的操作笔记
1.创建修改表时,为datetime字段设置当前时间为默认值 CREATE TABLE `NewTable` ( `id` int(11) NOT NULL AUTO_INCREMENT , `des ...
- cookie简介
上例子 1.首先要用php创建cookie发送给客户端,利用setcookie()方法即可 <?php /* * * @Authors peng--jun * @Email 1098325951 ...