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);
}

效果