css改變CheckBox的默認樣式

<label class="so_far">
    <div class="so_far_check">
        <input type="checkbox" class="weui-check">
        <p class="suggest_round">
            <svg t="1539140624347" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1588" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <style type="text/css"></style>
                </defs>
                <path d="M816.408011 340.3015 816.408011 340.3015 467.230354 689.478134l0 0c-8.242731 8.240685-19.628036 13.338796-32.205493 13.338796-12.576433 0-23.962761-5.097088-32.203446-13.338796l0 0L205.460442 492.117161l0 0c-8.243755-8.240685-13.340843-19.628036-13.340843-32.204469 0-25.155936 20.390399-45.545312 45.544289-45.545312 12.577456 0 23.962761 5.097088 32.205493 13.340843l0 0 165.155481 165.153434 316.972165-316.969095 0 0c8.240685-8.243755 19.628036-13.340843 32.203446-13.340843 25.15389 0 45.544289 20.389376 45.544289 45.545312C829.745784 320.671417 824.649719 332.060815 816.408011 340.3015z" fill="#fff" p-id="1589"></path>
            </svg>
        </p>
    </div>
    <div class="so_far_txt">至今</div>
</label>

 

 

.so_far {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 1.5rem;
}
.so_far_check {
    margin-right: .1rem;
    display: inline-block;
}
.weui-check {
    position: absolute;
    left: -9999em;
}
.weui-check:checked+.suggest_round {
    background-color: #ff7561;
    border: none;
}
.suggest_round {
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    width: .38rem;
    height: .38rem;
    line-height: .40rem;
    border: 1px solid #9a9a9a;
    border-radius: 50%;
}
.so_far_txt {
    display: inline-block;
    vertical-align: middle;
}


.so_far_check:checked+label:after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 9px;
    height: 4px;
    border: 2px solid #424242;
    border-top-color: transparent;
    border-right-color: transparent;
    transform: rotate(-45deg);
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}