html中修改单选框选中样式

      <div class="check"> 
                    <input type="radio" name="zi" id="zijin1" checked value="1000-3000">
                    <label for="zijin1" style="cursor:pointer">1000-3000</label>
                    <input type="radio" name="zi" id="zijin2" value="3000-5000">
                    <label for="zijin2" style="cursor:pointer">3000-5000</label>
                    <input type="radio" name="zi" id="zijin3" value="5000以上">
                    <label for="zijin3" style="cursor:pointer">5000以上</label>
                </div>
            </div>

css

       .check-item input {
            display: none;  //先取消默认的样式
        }

        label::before {
            display: inline-block;
            width: 0.33rem;
            height: 0.33rem;
            background-image: url(img/check2.png);
            background-size: 100% 100%;          //选中之前的样子
        }

        .check-item input:checked+label::before {
            background-image: url(img/check.png);
            background-size: 100% 100%;    //选中之后的样式
        }