input做一个开关按钮
.mui-switch {
width: 52px;
height: 31px;
position: relative;
border: 1px solid #dfdfdf;
background-color: #fdfdfd;
box-shadow: #dfdfdf 0 0 0 0 inset;
border-radius: 20px;
display: inline-block;
-webkit-appearance: none;
outline: none; }
.mui-switch:before {
content: '';
width: 29px;
height: 29px;
position: absolute;
top: 0px;
left: 0;
border-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.mui-switch:checked {
background-color: red; }
.mui-switch:checked:before {
left: 21px; }
<label><input class="mui-switch" type="checkbox" value=""> </label>
input做一个开关按钮的更多相关文章
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- react实例之todo,做一个实时响应的列表操作
react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...
- 使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
- jsPlumb插件做一个模仿viso的可拖拉流程图
前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义拖拉的流程图,并且可以序列化保存在服务器端. 我在这次的实现上面做得比较粗糙,还有分享我在做j ...
- 用Socket做一个局域网聊天工具(转)
原文:http://www.cnblogs.com/technology/archive/2010/08/15/1799858.html 程序设计成为简单的服务端和客户端之间的通信, 但通过一些方法可 ...
- HDU-2500 做一个正气的杭电人
http://acm.hdu.edu.cn/showproblem.php?pid=2500 做一个正气的杭电人 Time Limit: 1000/1000 MS (Java/Others) M ...
- 做一个正气的杭电人--hdu2500
做一个正气的杭电人 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- 利用jquery+iframe做一个ajax上传效果
以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
- Windows Phone开发(21):做一个简单的绘图板
原文:Windows Phone开发(21):做一个简单的绘图板 其实我们今天要说的就是一个控件--InkPresenter,这个控件并不是十分强大,没办法和WPF中的InkCanvas相比,估计在实 ...
随机推荐
- SpringMVC 允许跨域访问 也可以选择限制指定IP 允许访问 对象的数据传输
java ajax
- sqlalchemy orm介绍
ORM介绍 简解:用户会使用ORM时会直接访问对象,对象在通过ORM与数据库进行交互,不需要用户操作sql. 详解:orm英文全称object relational mapping,就是对象映射关系程 ...
- 通过WireShark抓取iPhone联网数据方法
通过WireShark抓取iPhone联网数据方法 命令行 rvictl -s <UDID> 然后再wireshark选择rvi0进行抓包即可 抓包完后,移除用命令 rvictl -x & ...
- linux --- 7. 路飞学城部署
一.前端 vue 部署 1.下载项目的vue 代码(路飞学城为例), wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip ...
- Python3 tkinter基础 Menu add_checkbutton 多选的下拉菜单
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- vi中换行、翻页和查找功能
vi时,按ESC进入Command模式, 1. 移动光标命令:j 向下移动一行:k 向上移动一行:h 向左移动一个字符:l 向右移动一个字符:对于 j.k.l和h键,命令前加数字,移动多行:如 3j, ...
- oracle的存储过程的作用
oracle的存储过程的作用 1.存储过程可以使得程序执行效率更高.安全性更好,因为过程建立之后 已经编译并且储存到数据库,直接写sql就需要先分析再执行因此过程效率更高,直接写sql语句会带来安全性 ...
- Robot Framework安装及配置
Robot Framework安装及配置 需要按照的软件有Python.WxPython.robot framework.robotframework-ride.robotframework-sele ...
- WebApi 后台获取token值
前台传递一个token,后台不知道怎么获取那么不是很悲剧吗. $(function () { $.ajax({ url: "/api/TokensTest/FirstCode", ...
- Selenium如何在谷歌浏览器模拟H5页面
一.基于java语言(转载:http://www.mamicode.com/info-detail-1972340.html) public class runtest { WebDriver dri ...