按钮切换组件

 本代码只是供自己学习使用，如有错误，希望批评指出！
布局分布：

<div id="offNo">
      <input type="checkbox" id="fd" class="fd"/>
      <label for="fd" class="toggle"><span class="toggle_header"></span></label>
  </div>

 样式：

   body{
            background: #edf0f4;
            font-family:sans-serif;
            color: #fff;
        }
        /*将双选框隐藏掉*/
        input{
            position: absolute;
            left: -99em;
        }
        /*不设宽高，让元素自动填充，定位垂直居中*/
        #offNo{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
        }
        /*label行内元素不能设置宽高，显示为行内块元素*/
        .toggle{
            display: inline-block;
            width: 120px;
            height: 50px;
            background: #d21626;
            border-radius: 5px;
            cursor: pointer;
        }
        .toggle:before,.toggle:after{
            line-height: 50px;
            font-size: 14px;
            z-index: 2;
            position: absolute;
        }
        .toggle:before{
            content: 'OFF';

            left: 20px;
            color: #d21626;
            
        }
        .toggle:after{
            content: 'ON';
            position: absolute;
            color: #fff;
            right: 20px;
        }
        /*滑动背景*/
        .toggle_header{
            display: inline-block;
            width: 65px;
            height: 44px;
            background: #fff;
            position:relative;
            top: 3px;
            left: 3px;
            border-radius: 5px;
            transform: translateX(0px);
        }
        /*选择滑动60px*/
        input:checked +.toggle .toggle_header{
            width: 54px;
            transform: translateX(60px);
        }
        /*滑动背景变色*/
        input:checked +.toggle{
            background: #66b317;
        }
        input:checked +.toggle:before{
            color:#fff;
        }
        input:checked +.toggle:after{
            color: #66b317;
        }

    </style>

 

转载于:https://www.cnblogs.com/wjylca/p/6522177.html