纯CSS模拟单选框

1、html

   <div class="option">
      <input type="radio" :value="optitem.optionId">
      <label  :for="optitem.optionId"></label>
      <span class="radio_span"> {{optitem.name}}</span>
   </div>

2、css
   

  .option {
     position: relative;
  }

  input[type="radio"] {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     opacity: 0;
     z-index: 99;
  }

  input[type="radio"] + label {
     position: absolute;
     left: .2rem;
     top: .24rem;
     width: .24rem;
     height: .24rem;
     border-radius: 50%;
     background: url(./radio.png);
     background-size: .24rem .24rem;;
     background-repeat: no-repeat;
 }

 input:checked + label {
     background: url(./radioed.png);
     background-size: .24rem .24rem;;
     background-repeat: no-repeat;
 }