自定义一个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. PAT 团体程序设计天梯赛-练习集 L1-015. 跟奥巴马一起画方块

    美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝“计算机科学教育周”正式启动,奥巴马编写了很简单的计算机代码:在屏幕上画一个正 ...

  2. Sass与Compress实战：第八章

    概要:帮助你实现样式表的最佳性能 本章内容: ● 样式表拼接 ● 样式表和资源压缩 ● 减少和并行图片请求的策略 ● 选择器性能和优化策略 1. 测量客户端性能 性能优化的起点和终点都是测量.在第一次 ...

  3. windows 环境下搭建django 错误分析总结

    最近对于python核心编程学习完后,想进一步学习django的web开发,考虑再三还是决定在本机(win7)上搭建环境. 刚接触难免会出现问题,最大的一个问题是安装完django的包后,在cmd命令 ...

  4. 洛谷-ISBN号码-简单字符串

    题目描述 Description 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”就是分隔符 ...

  5. layoutSubview触发时机

    layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 2.addSubview会触发layoutSubviews 3.设置view的Frame会触 ...

  6. python--sorted函数和operator.itemgetter函数

    1.operator.itemgetter函数operator模块提供的itemgetter函数用于获取对象的哪些维的数据,参数为一些序号(即需要获取的数据在对象中的序号),下面看例子. a = [1 ...

  7. linux下ClamAV使用

    第一步:Clamav下载http://www.clamav.net/downloads#yuminstall wget –y第二步:创建clamav用户和组groupaddclamav   (创建cl ...

  8. 错误： symbol lookup error: /usr/local/lib/libreadline.so.6: undefined symbol: PC

    su - root mkdir temp mv /local/ldconfig  apt-get update

  9. 学习笔记——备忘录模式Memento

    备忘录模式,可以将当前状态保存,并随时恢复. Originator存在状态state,当需要保存此状态时,通过CreateMemento创建一个备忘录对象Memento保存此状态:而需要恢复相应状态时 ...

  10. SmartImageView的使用

    对于Android智能图像查看 SmartImageView是一个简易替换为Android标准的ImageView这还可以让图像从URL或用户的联系人地址簿加载.图片被缓存到内存和磁盘的超快速装载. ...