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;
    width: .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;
    width: .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);
}

效果