css 改变radio、checkbox默认样式

<div class="input-item">
      <label for="sex">性别：</label>
      <div class="radio-wrap">
        <input type="radio" class="radio" value="0" id="sex" name="sex" checked="checked"/>
        <div class="label">√</div>
      </div>
      <span>男</span>
      <div class="radio-wrap">
        <input type="radio" class="radio" value="1" id="sex" name="sex"/>
        <div class="label">√</div>
      </div>
      <span>女</span>
    </div>
    
    <div class="input-item">
      <label for="fruit">水果：</label>
      <div class="checkbox-wrap">
        <input type="checkbox" class="checkbox" value="西瓜"/>
        <div class="label">√</div>
      </div>
      <span>西瓜</span>
      <div class="checkbox-wrap">
        <input type="checkbox" class="checkbox" value="菠萝" />
        <div class="label">√</div>
      </div>
      <span>菠萝</span>
    </div>
    
    <button type="button" onclick="toSubmit()">提交</button>

.input-item {
        display: flex;
        margin-top: 20px;
      }
      .radio-wrap {
        position: relative;
        margin-right: 10px;
      }
      .radio-wrap:nth-of-type(2) {
        margin-left: 30px;
      }
      .radio {
        width: 20px;
        height: 20px;
        margin: 0;
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
      }
      .label {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        border: 1px solid skyblue;
        color: skyblue;
      }
      input[type=radio]:checked + .label {
        background-color: skyblue;
        color: #fff;
      }
      
      .checkbox-wrap {
        position: relative;
        margin-right: 5px;
      }
      .checkbox-wrap .label {
        width: 20px;
        height: 20px;
        border-radius: 5px;
        color: skyblue;
        border: 1px solid skyblue;
      }
      .checkbox-wrap .checkbox {
        width: 20px;
        height: 20px;
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
      .checkbox-wrap .checkbox:checked + .label {
        background-color: skyblue;
        color: #FFFFFF;
      }
      .checkbox-wrap:nth-of-type(2) {
        margin-left: 30px;
      }

function toSubmit(){
      let radio = document.querySelectorAll('.radio');
      let sexVal = "0";
      for(let i=0; i<radio.length; i++){
        if(radio[i].checked){
          sexVal = radio[i].value;
        }
      }
      
      console.log(sexVal);
      
      
      let checkbox = document.querySelectorAll('.checkbox');
      let fruitArr = [];
      for(let i=0; i<checkbox.length; i++){
        if(checkbox[i].checked){
          fruitArr.push(checkbox[i].value)
        }
      }
      console.log(fruitArr);
      
    }