css实现radio/checkbox自定义样式

实现思路

1.设置input 属性hidden对该input进行隐藏，或者通过display:none也可以

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>

2.借助label for标签通过id绑定input ，这样在点击label时实际就是点击了input

<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
<label for="adviceRadio1" class="advice"></label>

3.定义label的样式，设置未选中状态的背景图

.advice{
    height: 12px;
     12px;
    display: inline-block;
    background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png') no-repeat center;
    vertical-align: middle;
}        

4.使用相邻选择器设置选中状态label的样式

input[type="radio"]:checked + .advice{
        background-image: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
}