重庆分公司

咨询热线：

028-86922220

关于我们

服务项目

小程序开发

案例展示

建站动态

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

label+input如何实现按钮开关切换效果-创新互联

这篇文章主要介绍label+input如何实现按钮开关切换效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司从2013年创立，先为常熟等服务建站，常熟等地企业，进行企业商务咨询服务。为常熟企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

代码如下所示：




  
  
  
  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如何实现按钮开关切换效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站制作公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：label+input如何实现按钮开关切换效果-创新互联
分享链接：http://cqcxhl.cn/article/hggis.html