zoukankan      html  css  js  c++  java
  • switch开关

    1.开关按钮 效果如下图

    2.css代码

       .form-switch{
           display: inline-block;
       }
         .form-switch input[type="checkbox"]{ display: none; }
                 
                 
                 .form-switch >div{
                     position: relative;
                    display: inline-block;
                    padding: 0 5px;
                    width: auto!important;
                    min-width: 35px;
                    height: 22px;
                    line-height: 22px;
                    background-color: #fff;
                    box-shadow: #ccc 0px 0px 0px 2px;
                    border-radius: 20px;
                    overflow: hidden;
                 }
                 
                 .form-switch div>span{
                     color: #999;
                 }
      
        .form-switch i{
            position: absolute; 
            left: 5px;
            top: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #d2d2d2;
            -webkit-transition: .1s linear;
             transition: .1s linear;
        }
        
        .form-switch div >em{
            position: relative;
            top: 0;
            width: 25px;
            margin-left: 21px;
            padding: 0!important;
            text-align: center!important;
            color: #999!important;
            font-style: normal!important;
            font-size: 12px;
        }
         .form-switch div >em:last-child{
             display: block;
         }
         .form-switch input[type="checkbox"]:checked + div {
         border-color: #3679b7;
        background-color: #3679b7;
        color: #fff;
     }
     .form-switch input[type="checkbox"]:checked + div i{
        left: 100%;
        margin-left: -21px;
        background-color: #fff;
    }
     .form-switch input[type="checkbox"]:checked + div em:last-child{
        display: block;
        color: #fff;
        margin-left: 5px;
        margin-right: 21px;
        color: #fff!important;
    }
    .form-switch input[type="checkbox"]:checked + div em:nth-child(2){
        display: none;
        color: #fff;
    }

    3.html结构

    1  <label class="form-switch">
    2           <input type="checkbox" id="toggle-button" name="switch" checked="">
    3           <div>
    4             <i></i>
    5             <em>OFF</em>
    6             <em>ON</em> 
    8           </div>
    9    </label>
  • 相关阅读:
    Ubuntu下官方QQ崩溃的解决
    [转]PHP函数的实现原理及性能分析
    [收藏的资料]301重定向的实现方法
    手动配置Ubuntu 指定DNS服务器地址
    C# FTP操作类
    vs2010 快捷键大全
    分享一个不错的VS插件——CodeMap
    C# 快速的批量修改重命名.net程序的命名空间(一)转 tianyaxiang
    jquery 的 ajax 程序 简单的
    winform窗体间传值
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/9887659.html
Copyright © 2011-2022 走看看