单选框样式/自定义单选框/改变单选框border颜色/css单选框

1、首先将原先的单选框隐藏掉。
2、利用label：before 在label的前面加一个元素来模拟单选框的样式。
3、利用：checked css选择器将选中的单选框单独设置样式。
4、具体样式自根据项目手动设置比较灵活。
代码如下：

<!--html-->
 <ul class="pay_type">
          <li v-for="(item,i) in circleData.charges_type" :key="i">
            <input
              :id="item.id"
              class="radio"
              type="radio"
              name="radios"
              :value="JSON.stringify(item)"
              v-model="checkedValue"
            />
            <label
              :for="item.id"
            >{{item.type}}</label>
            
          </li>
        </ul>

//css
 > input {
      display: none;
    }
    > label {
      display: flex;
      align-items: center;
    }
    > input[type="radio"] + label:before {
      content: "";
      display: inline-block;
      width: 13px;
      height: 13px;
      padding: 3px;
      border: 1.5px solid #d7d7d7;
      border-radius: 50%;
      background: #f5f5f5;
      margin-right: 10px;
    }
    > input[type="radio"]:checked + label:before {
      content: "";
      border: 1.5px solid #ff4443;
      background: #ff4443 content-box;
    }