label+input实现开关切换效果

Posted 一只猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了label+input实现开关切换效果相关的知识,希望对你有一定的参考价值。

Document

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

        .ipt:checked + .box .switch-btn {
            left: 0;
        }
    

当然要配合transition来实现

下面是效果

ON OFF

全部css代码

            .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: 0;
            }
            .switch-btn {
                position: absolute;
                left: -37px;
                top: 0;
                width: 111px;
                height: 30px;
                transition: all 0.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;
            }
    

以上是关于label+input实现开关切换效果的主要内容,如果未能解决你的问题,请参考以下文章

纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

用一个开关切换所有开关

VUE实现Studio管理后台:开关(Switch)控件,输入框input系列

ViewPager开关没有显示片段之间

input 被checked时和label配合的妙用

Android:BottomNavigationView第一个片段开关超级延迟