CSS美化单选多选按钮（无需图片）

微信图片_20181122155506.png

<div class="supportTbody">

    <!-- 1.单选按钮 -->
    <label for="">
        <input type="radio" name="" id="" checked>
        <i></i>
        <b>带店培训</b>
    </label>
    <!-- 2.复选按钮 -->
    <label for="">
        <input type="checkbox" name="" id="" checked>
        <i>✓</i>
        <b>选址培训</b>
    </label>

</div>

css代码:

<style type="text/css"> 
.supportTbody label b{
color:#666;
font-size:14px;
}
.supportTbody label i {
font-size: 12px;
font-style: normal;
display: inline-block;
width: 13px;
height: 13px;
text-indent:2px;
line-height: 15px;
color: #fff;
margin: 0 5px 0 0px;
border: #dcdfe6 1px solid;
} 
.supportTbody input[type="radio"]+i {
border-radius: 50%;
}
.supportTbody input[type="radio"]:checked+i {
background: #fff;
border:1px solid #4999d2;
position:relative;
}
.supportTbody input[type="radio"]:checked+i:after{
content:'';
width:7px;
height:7px;
position:absolute;
top:3px;
left:3px;
background:#4999d2;
border-radius:50%;
}
.supportTbody input[type="checkbox"],.supportTbody input[type="radio"] {
display: none;
}
.supportTbody input[type="checkbox"]+i{
border-radius: 3px;
}
.supportTbody input[type="checkbox"]:checked+i{
background: #4999d2;
border:1px solid #4999d2;
}
.supportTbody input[type="checkbox"]:checked~b,.supportTbody input[type="radio"]:checked~b{
color:#4999d2;
}
</style>