zoukankan      html  css  js  c++  java
  • css自定义checkbox样式

    场景

    项目中使用checkbox选择用户协议,但是原checkbox样式不怎么好看,这里自己单独设置一个

    代码

    <div class="auth_agreen">
        <input id="select_all" name="select_all" type="checkbox" checked>
        <label for="select_all"> <i></i>我已阅读<a href="./agreement.html">《用户协议》</a>|
        <ahref="./conceal.html">《隐私协议》</a></label>
    </div>
    
    
    input[type="checkbox"] {
        display: none;
    }
    
    input[type="checkbox"]+label>i {
        display: inline-block;
         .9375rem;
        height: .9375rem;
        border: .0625rem solid #000;
        background: #fff;
        margin-right: .625rem;
        vertical-align: middle;
    }
    
    input[type="checkbox"]:checked+label>i {
        position: relative;
        border: .0625rem solid #3582E9;
        background: #3582E9;
        top: -0.0625rem;
    }
    
    input[type="checkbox"]:checked+label>i::before {
        content: '';
        position: absolute;
         .25rem;
        height: .5rem;
        color: black;
        border-bottom: .125rem solid #fff;
        border-right: .125rem solid #fff;
        left: 50%;
        top: 22%;
        transform-origin: center;
        transform: translate(-50%, -30%) rotate(40deg);
        -webkit-transform: translate(-50%, -30%) rotate(40deg);
    }
    
    

    效果

  • 相关阅读:
    自动生成小学四则运算题目
    python自动生成小学四则运算题目
    大学排名
    中国大学排名
    pachong
    paiqiu
    文件管理
    软件工程课作业 2020-11-23
    时序图,E-R图,数据流程图
    考研信息查询系统需求规格说明书
  • 原文地址:https://www.cnblogs.com/lpp-11-15/p/12973278.html
Copyright © 2011-2022 走看看