自定义checkbox和radio的样式

代码记录：

1.先去除当前默认的样式

<label><input type="radio"  name="selected"  value="{{list.Txt}}" <span></span>{{list.Txt}}</label>

input[type="radio"]{
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  display:none;
}

2.自定义一个样式

label input[type="radio"] + span{
  width:20px;
  height:20px;
  line-height: 20px;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  margin-right: 8px;
  display:inline-block;
  background:url(../../../assets/myKefu/no.png) no-repeat;
  background-size:100%;
  vertical-align: middle;
}

3.利用伪类选中的时候样式

label input[type="radio"]:checked + span{
  //background-position:0 -21px
  background:url(../../../assets/myKefu/yes.png)  no-repeat;
  background-size:100%;
}

效果：