自定义修改input=radio的样式(选中+禁用)

前言

鉴于在移动端开发中用到的移动端的组件库内没有符合UI设计要求的radio样式，只能使用最原始的input来造成符合需求的框

实现

样式与原始的差不多，只是选中的颜色改成绿色

		<input
        id="inputChoice1"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice1"
       />
       <label for="inputChoice1"></label>
       <span>choice1</span>
       <input
         id="inputChoice2"
         v-model="advice"
         class="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice2"
       />
       <label for="inputChoice2"></label>
       <span>choice2</span>

选中时：

禁用时

样式的修改主要还是借助各种选择期，以及将选中框的样式寄托在label上

样式代码如下

//将input的圆框隐藏
 input[type='radio'] {
    width: 0.32rem;
    height: 0.32rem;
    display: none;
  }
//定位label到圆框的位置，并修改样式为圆框
  label {
    position: relative;
    top: 0.1rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 1px solid #999;//默认为边框
  }

  /*设置选中的radio的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/
  input:checked + label {
    background: url('../../../assets/images/mobile/icon-check.png'); //直接借助背景图片
    border: none;
  }
   /*设置禁用的radio的样式*/
  input:checked[disabled] + label {
    background: url('../../../assets/images/mobile/icon-check-disabled.png');
    border: none;
  }