自定义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;
width: 14px;
height: 14px;
visibility: hidden;
}
    #check .input_check+label {
vertical-align: middle; 
display: inline-block;
width: 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;
}

结果:

posted @ 2020-04-01 17:34  shetoutou  阅读(393)  评论(0编辑  收藏  举报