自定义radio样式

html结构:

  <span class="form-checkbox-label">是否缴纳社保:&nbsp;&nbsp;</span>
  <span>
     <input type="radio" class="input_check" id="check1" name="sex" />
     <label for="check1"></label>
  </span>
  <label for="check1">是</label>
  <span>
     <input type="radio" class="input_check" id="check2" name="sex" />
     <label for="check2"></label>
  </span>
  <label for="check2">否</label>

css样式:

    /* radio自定义样式 */
    #check span { 
position: relative; 
}
    #check .input_check {
position: absolute;
 14px;
height: 14px;
visibility: hidden;
}
    #check .input_check+label {
vertical-align: middle; 
display: inline-block;
 15px;
height: 15px;
border: 1px solid #bfbfbf;
border-radius: 50%;
padding: 3px;
background-clip: content-box;
}
   #check .input_check:checked+label {
    background-clip: content-box;
}
#check1, #check2{
vertical-align: middle;
}

结果:

原文地址:https://www.cnblogs.com/shemingxin/p/12614103.html