label+input实现按钮开关切换效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .ipt {

            display: none;

        }

        .box {

            width: 74px;

            height: 30px;

            line-height: 30px;

            overflow: hidden;

            border: 1px solid #eee;

            border-radius: 4px;

            position: relative;

            cursor: pointer;

        }

       label {display:inline-block;}

        .ipt:checked + .box .switch-btn {

            left: ;

        }

        .switch-btn {

            position: absolute;

            left: -37px;

            top: ;

            width: 111px;

            height: 30px;

            transition: all .5s;

        }

        .switch-btn span{

            width: 37px;

            height: 30px;

            display: block;

            text-align: center;

            float: left;

            font-size: 14px;

        }

        .on {

            background: #52B13C;

            color: white;

        }

        .white {

            background: white;

        }

        .off {

            background: #EEEEEE;

        }

    </style>

</head>

<body>

    <p>主要使用label+input来实现改变left的值,下面是核心代码，意思就是<code>选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);</code></p>

    <pre>

        .ipt:checked + .box .switch-btn {

            left: ;

        }

    </pre>

    <p>当然要配合transition来实现</p>

    <p>下面是效果</p>

    <div class="wrap">

        <label>

            <input class="ipt" type="checkbox" name="" value="">

            <div class="box">

                <div class="switch-btn">

                    <span class="on">ON</span>

                    <span class="white"></span>

                    <span class="off">OFF</span>

                </div>

            </div>

        </label>

    </div>

    <p>全部css代码</p>

    <pre>

            .ipt {

                display: none;

            }

            .box {

                width: 74px;

                height: 30px;

                line-height: 30px;

                overflow: hidden;

                border: 1px solid #eee;

                border-radius: 4px;

                position: relative;

                cursor: pointer;

            }

            .ipt:checked + .box .switch-btn {

                left: ;

            }

            .switch-btn {

                position: absolute;

                left: -37px;

                top: ;

                width: 111px;

                height: 30px;

                transition: all .5s;

            }

            .switch-btn span{

                width: 37px;

                height: 30px;

                display: block;

                text-align: center;

                float: left;

                font-size: 14px;

            }

            .on {

                background: #52B13C;

                color: white;

            }

            .white {

                background: white;

            }

            .off {

                background: #EEEEEE;

            }

    </pre>

</body>

</html>

label+input实现按钮开关切换效果的更多相关文章

  1. label+input实现开关切换效果

    Document 主要使用label+input来实现改变left的值,下面是核心代码,意思就是选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px ...

  2. 移动端页面a input去除点击效果及pc端切换

    1 手机端页面a button input去除点击效果以及闪屏问题 添加: a, button, input { -webkit-tap-highlight-color: rgba(255, 0, 0 ...

  3. 纯 CSS 利用 label + input 实现选项卡

    clip 属性 用于剪裁绝对定位元素. .class { position:absolute; clip:rect(0px,60px,200px,0px); } scroll-behavior: sm ...

  4. 很实用的HTML5+CSS3注册登录窗体切换效果

    1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果 <!DOCTYPE html><!--[if lt IE 7 ]> <html lang=" ...

  5. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  6. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  7. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  8. 【jQuery Demo】图片切换效果整理

    图片的切换效果有很多,比较常见的有水平滚动.垂直滚动.淡入淡出等.我们接下来一一实现这些效果. 1.水平滚动 1) 我们先来实现HTML页面,代码很简单: <div id="conta ...

  9. 100种不同图片切换效果插件pageSwitch

    分享100种不同图片切换效果插件pageSwitch.这是一款适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,支持自定义切页动画.效果图如下: 在线预览   源码下载 实现的代码. ht ...

随机推荐

  1. Windows 10 PC 安装 Docker CE

    系统要求 Docker CE 支持 64 位版本的 Windows 10 Pro,且必须开启 Hyper-V. 如果系统是win 10 家庭版安装 docker  很恶心, 我也是废了2天才安装, 由 ...

  2. windows10 Ubuntu子系统下卸载Mysql重装

    首先删除mysql: sudo apt-get remove mysql-* 然后清理残留的数据 dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg ...

  3. 【NLP】中文分词：原理及分词算法

    一.中文分词 词是最小的能够独立活动的有意义的语言成分,英文单词之间是以空格作为自然分界符的,而汉语是以字为基本的书写单位,词语之间没有明显的区分标记,因此,中文词语分析是中文信息处理的基础与关键. ...

  4. Cygwin install apt-cyg

    1. UPDATE CYGWIN First of all you will need to ensure that Cygwin has the necessary binaries require ...

  5. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  6. 微信小程地图片未加载成功的情况 Failed to load local image resource

    在开发小程序的时候,发现在加载图片时并没有异常,但是后台却报错了. 例如以下我的一段代码: <view class="useage2 "> <image src= ...

  7. 利用表达式树Expression优化反射性能

    最近做了一个.Net Core环境下,基于NPOI的Excel导入导出以及Word操作的服务封装,涉及到大量反射操作,在性能优化过程中使用到了表达式树,记录一下. Excel导入是相对比较麻烦的一块, ...

  8. 商派OMS增加PMC跟生产中心角色权限思路

    一.目标:根据现有的商派OMS框架逻辑二开 PMC中(外协单位.生产中心)角色权限(如:下图的仓库角色,根据[接单元.发货员.仓库管理员],选择一或多的版权仓库,同理,如外协单位根据[**.** .* ...

  9. CodeForces 116B【二分匹配】

    思路: 暴力..我不会呀.. YY一个二分匹配嘛,然后数组开小了.GG for an hour. #include <bits/stdc++.h> using namespace std; ...

  10. 51nod1428(优先队列)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1428 题意:中文题诶- 思路:贪心 问最少要多少教室就是求最多 ...