自定义一个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开关的更多相关文章

  1. vue自定义switch开关，使用less支持换肤

    实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...

  2. 自定义常用input表单元素三：纯css实现自定义Switch开关按钮

    自定义常用input表单元素的第三篇,自定义一个Switch开关,表面上看是和input没关系,其实这里采用的是checkbox的checked值的切换.同样,采用css伪类和"+" ...

  3. mui的switch开关的应用

    HTML: <!--mui的switch开关--> <div class="mui-content-padded"> <h5>switch开关m ...

  4. CSS做一个Switch开关

    本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...

  5. 使用css3 制作switch开关

    使用css3来实现switch开关的效果: html代码: <!--switch开关--><div class="switch-btn"> <inpu ...

  6. 微信小程序组件解读和分析：十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  7. elementui switch 开关，点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  8. 微信小程序 主题皮肤切换（switch开关）

    示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar):2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果3.把设置保存到本地,退出应用再进来时,依然加 ...

  9. mui switch(开关)里面token不能及时更新

    做登录的时候再本地用locaStorage存了一个token值,但是登录之后进入页面里面发现一个switch开关里面的token值会跟着开关的切换在上一个token和当前的这个token值之间切换,我 ...

随机推荐

  1. 常用的HTTP状态码如下

    成功的状态码: – 服务器成功返回网页 – 未修改 失败的状态码: – 请求的网页不存在 – 服务器暂时不可用 – 服务器内部错误 下面的不是很常用,记住上面那几个就ok了,有bug了再补充 其他的状 ...

  2. Sass与Compress实战：第二章

    1.使用变量 Sass使用$符号来标识变量,比如$highlight-color. 1.1声明变量 Sass声明变量和CSS声明属性很像: $highlight-color : #abcdef; 这意 ...

  3. Java Object 引用传递和值传递

    Java Object 引用传递和值传递 @author ixenos Java没有引用传递: 除了在将参数传递给方法(或函数)的时候是"值传递",传递对象引用的副本,在任何用&q ...

  4. 2016弱校联盟十一专场10.2——Floyd-Warshall

    题目链接:Floyd-Warshall 题意: 给你n个点,m条边,100>m-n>0,现在有q个询问,问你任意两点的最短距离,题目保证每条边都被连接,每条边的距离为1 题解: 首先我们可 ...

  5. BestCoder Round #85 A B C

    本来没有写博客的打算,可是看完了题解感觉这三道题这么水,我却只做出来一道,实在不应该,还是写点东西吧…… A.sum 问题描述 给定一个数列,求是否存在连续子列和为m的倍数,存在输出YES,否则输出N ...

  6. MVC5的控制器，使用HttpPost方式时，接收的参数为null的原因

    1.问题现象 POST提交时,控制的Action接收到的参数为null, 但Request.Form.Request.Params等集合其实是包含提交的所有数据的 .如下截图: 2.该问题很诡异,重新 ...

  7. linux服务器被攻击处理过程

    开始排查 首先检查日志,以前做过安全运维,所以写过类似于检查命令和工具,开始一一排查. #查看是否为管理员增加或者修改 find / -type f -perm #显示文件中查看是否存在系统以外的文件 ...

  8. jQuery 事件 - bind() 方法

    定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 实例1(一个事件) 记得把js引用地址换掉 当点击鼠标时,隐藏或显示 p 元素: <html&g ...

  9. 多线程---同步函数的锁是this（转载）

    class Ticket implements Runnable { private int tick = 100; Object obj = new Object(); boolean flag = ...

  10. 正确使用Core Data多线程的3种方式

    在#Pragma Conference 2015会议上,Marcus Zarra,撰写过关于Core Data和Core Animation的书,叙述了三种在多线程环境下使用Core Data的方法并 ...