美文网首页
自定义checkbox样式

自定义checkbox样式

作者: 愤的小鸟怒 | 来源:发表于2019-03-28 18:17 被阅读0次
    <style>
    .global-checkbox__label--margin-10::before{
            margin-right: 0.625rem;
        }
    
        .global-checkbox__box:focus + .global-checkbox__label::before {
            box-shadow: 0 0 .1em .1em #061E52;
        }
    
        .global-checkbox__box + .global-checkbox__label::before {
            content: "\a0";  /*不换行空格*/
            display: inline-block;
            width: 1.55vw;
            height: 1.69rem;
            border-radius: 0.25rem;
            background-color:white;
            border: 0.125rem solid #000000;
            text-align: center;
            line-height: 1.69rem;  /*行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高*/
        }
    
        .global-checkbox__box:checked + .global-checkbox__label--white::before {
            /* content: "\2713"; */
            background: url('./img/checkbox-content.png') no-repeat;
            background-size: 0.625rem 0.44rem;
            background-color: #ffffff;
            background-position: center;
        }
    
        .global-checkbox__box:checked + .global-checkbox__label--black::before {
            /* content: "\2713"; */
            background: url('./img/checkbox-content-white.png') no-repeat;
            background-size: 0.625rem 0.44rem;
            background-color: #000000;
            background-position: center;
        }
    
        .global-checkbox__box {
            position: absolute;
            clip: rect(0, 0, 0, 0);
            /* visibility: hidden; 使用visibility会导致无法显示focus情况下的样式*/
        }
    
        .global-checkbox__box:disabled + .global-checkbox__label::before {
            background-color: gray;
            box-shadow: none;
            color: #555;
        }
    </style>
    <body>
    <div class="global-checkbox">
        <input class="global-checkbox__box " type="checkbox" id="awesome" />
        <label class="global-checkbox__label global-checkbox__label--margin-10 global-checkbox__label--black" for="awesome">Awesome!</label>
    </div>
    </body>
    

    相关文章

      网友评论

          本文标题:自定义checkbox样式

          本文链接:https://www.haomeiwen.com/subject/fqpcbqtx.html