自定义一个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. ssh: scp命令

    scp 复制命令 Eg. -r /tmp/q1 root@[::]/home 1．命令格式: scp [参数] [原路径] [目标路径] 2．命令功能: scp是 secure copy的缩写, sc ...

  2. JSP中 JSTL

    1,JSTL是JSP的标准标签库的简称,JSP标准标签库包括5类:分别是核心标签库,国际化标签库,SQL标签库,XML标签库,函数标签库: 2,常用的就是核心标签库和SQL标签库: 核心标签库:前置名 ...

  3. poj 1411 Calling Extraterrestrial Intelligence Again

    题意:给你数m,a,b,假设有数p,q,满足p*q<=m同时a/b<=p/q<=1,求当p*q最大的p和q的值 方法:暴力枚举 -_-|| and 优化范围 我们可以注意到在某一个m ...

  4. 多线程---其他方法 停止线程、守护线程、join方法

    第三方停止线程: 原来是stop(),因为该方法有些问题,所以被interrupt()方法取代,它的用途跟机制是 当没有指定的方式让冻结的线程恢复到运行状态时,这时需要对冻结进行清除,强制让线程恢复到 ...

  5. Openjudge-计算概论（A）-短信计费

    描述: 用手机发短信,一条短信资费为0.1元,但限定一条短信的内容在70个字以内(包括70个字).如果你一次所发送的短信超过了70个字,则会按照每70个字一条短信的限制把它分割成多条短信发送.假设已经 ...

  6. SharePoint 2013 工作流设计之Designer 使用“可视化视图

    转载自:http://www.cnblogs.com/jianyus/p/3406309.html SharePoint 2013增强了工作流功能,而Designer里面也添加了可视化设计视图,也就是 ...

  7. C - 哗啦啦村的扩建

    C - 哗啦啦村的扩建 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 512000/256000KB (Java/Others) Sub ...

  8. linux配置永久ip不生效解决方法

    本文原文来自 http://blog.csdn.net/zymx14/article/details/51472239 linux下使用ifconfig eth0 ip地址可以设置ip地址 ,命令为: ...

  9. DHCP 协议的 8 种消息类型及功能服务器

    1) 主机发送 DHCP Discover 广播包在网络上寻找 DHCP 服务器: 单播数据包, 地址. 2) DHCP 服务器向主机发送 DHCP Offer 单播数据包,包含 IP 地址.MAC ...

  10. ajax的理解和运用

    AJAX : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 譬 ...