zoukankan      html  css  js  c++  java
  • 含有开关提示文字的按钮

    <div class="btn-switch-t">
    <input type="checkbox" id="radio" name="switch" checked>
    <label for="radio" class="radio">
    <span class="circle"></span>
    <span class="text off">关</span>
    <span class="text on">开</span>
    </label>
    </div>

    .btn-switch-t{
    display: inline-block;
    max- 60px;
    overflow: hidden;
    position: relative;
    #radio{
    position: absolute;
    left: -999px;
    }
    }
    .btn-switch-t .text {
    display: none;
    }
    .btn-switch-t .on{
    color:#fff;
    }
    .btn-switch-t .off{
    color:#eee;
    }
    .btn-switch-t .circle {
    position: absolute;
    display: inline-block;
    }

    .btn-switch-t #radio ~label {
    background-color: grey;
    }

    .btn-switch-t #radio ~label .circle {
    left: 0;
    transition: all 0.3s;
    webkit-transition: all 0.3s;
    }

    .btn-switch-t #radio ~label .on {
    display: none;

    }

    .btn-switch-t #radio ~ label .off {
    display: inline-block;
    text-indent: 30px;

    }

    .btn-switch-t #radio:checked ~ label {
    box-shadow: #00ae66 0 0 0 16px inset;
    background-color: #00ae66;
    }

    .btn-switch-t #radio:checked ~label .circle {
    left: 37px;
    top: 1px;
    transition: left 0.3s;
    }
    .btn-switch-t #radio:checked ~label .on {
    text-indent: 15px;
    display: inline-block;
    }

    .btn-switch-t #radio:checked ~ label .off {
    display: none;
    }

    .btn-switch-t label {
    display: inline-block;
    position: relative;
    height: 25px;
    60px;
    border-top-left-radius: 15px 50%;
    border-bottom-left-radius: 15px 50%;
    border-top-right-radius: 15px 50%;
    border-bottom-right-radius: 15px 50%;
    }

    .btn-switch-t label .circle {
    display: inline-block;
    height: 23px;
    23px;
    border-radius: 50%;
    background-color: #eee;
    }

    .btn-switch-t label .text {
    text-indent: 30px;
    line-height: 24px;
    font-size: 15px;
    }

    
    
  • 相关阅读:
    谁的朱砂痣染白了谁的白月光
    随机数
    常见面试简单汇总整理
    oss分页列举遍历文件创建软链接
    oss创建软链接
    看英文文档的好处
    js原型链相关
    js 中的this指向问题
    jquery.fn.init
    转载
  • 原文地址:https://www.cnblogs.com/aloneCode/p/6768898.html
Copyright © 2011-2022 走看看