自定义一个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. POJ 2231 Moo Volume

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%lld & %llu Description Farmer Jo ...

  2. JS复习：第三章&第四章

    第三章 一.把一个值转换成字符串的两种方法: 1.使用每个值都有的toString( )方法.这个方法唯一要做的就是返回相应值的字符串表现.例如: var age = 11 ; var ageAsSt ...

  3. JuneX_13

    在积分制的压力下,基本上能打的比赛都打了(除了忘了的).打了这么多比赛(其实也不多),发现有相当一部分题目考察的还是挺基础的内容,像搜索,DP,树,图,然而做的并不好.要么直接不会敲,要么调试大半天, ...

  4. putty完全使用手册--多窗口---git提交---连接数据库--自动日志显示

    01 putty dev 192.168.3.38 02 cd /home/gongfu/tripb/cranedev02.1 git status git add git commit git pu ...

  5. shell脚本学习（四）

    1.文件权限 1.1 用户有一个称为setuid(S)的特殊权限,它出现在执行权限(x)的位置,setuid权限允许用户以拥有者的权限来执行可执行文件,即使这个可执行文件是由 其他用户运行的. 具有s ...

  6. adoquery查询语句sql动态查询删除方法

    百度文库链接地址:http://wenku.baidu.com/link?url=uVzbjjaHIziYuproREP_hO7MTLMf2g998QTKN4oLMeko5D7k0vSlTMFaby2 ...

  7. 统计英文文章中各单词的频率，打印频率最高的十个单词（C语言实现）

     一.程序思路及相关代码 首先打开文件,代码如下 FILE *fp; char fname[10]; printf("请输入要分析的文件名:\n"); scanf("%s ...

  8. input[type=number]问题

    有时候对于只能输入数字的表单会有想要写成input[type=number]但是其中有一个问题 <input type="text" name="code" ...

  9. mysql教程

    mysql教程 2016年5月14日 0:09 1.查看mysql帮助信息 C:\Users\zhangcunli>mysql --help mysql  Ver 14.14 Distrib 5 ...

  10. Oracle Day2 过滤、排序、单行函数

    1.过滤和排序 SQL> --查询10号部门的所有员工信息 SQL> select * from emp ; 未选定行 SQL> ed SP2: 无法创建保存文件 "afi ...