css3 单选框美化

 <ul>
   
      <li><label class="my_protocol"><input type="radio" name="leixing" class="input_agreement_protocol"><span>span>身份证label>li>
      
军官证
      
护照
  ul>

/*隐藏checkbook*/
.my_protocol .input_agreement_protocol {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}
/*未被选中时*/
.my_protocol .input_agreement_protocol + span {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  background: url("../images/icon_check.png") no-repeat;
  background-size: cover;
  margin-right: 0.4rem;
  float: left;
}
/*选中checkbox时，修改背景图*/
.my_protocol .input_agreement_protocol:checked + span {
  background: url("../images/icon_checkbox_checked.png") no-repeat;
  background-size: cover;
}