实现单选（radio）和多选（checkbox）自定义选择样式

自定义单选和多选的radio和checkbox实现

还在用js来实现单选和多选的字定义样式吗，那你就low了，现在直接用css就可以实现了，不需要太多的逻辑代码，能过实现你想要的单选和多选效果的样式~ 那就请仔细阅读下文

先看效果如图↓
单选：
1

2

3

多选：
1

2

代码
1

//单选时的html代码
<div class="Seleted">
       <label class="border-bottom">
           <input name="Select1" type="radio" hidden value="A" >
           <span class="box1">A</span>
           <div class="box-answer">是</div>
       </label>
       <label class="border-bottom">
           <input name="Select1" type="radio" hidden value="B">
           <span class="box1">B</span>  
           <div class="box-answer">否</div>
       </label>
 </div>

2

//多选时的html代码
<div class="Seleted">
    <label class="border-bottom">
        <input name="Select4" type="checkbox" hidden value="A">
        <span class="box1">A</span> 
        <div class="box-answer"> 选项1</div>
    </label>
    <label class="border-bottom">
        <input name="Select4" type="checkbox" hidden value="B">
        <span class="box1">B</span> 
        <div class="box-answer"> 选项2</div>
    </label>
    <label class="border-bottom">
        <input name="Select4" type="checkbox" hidden value="C">
        <span class="box1">C</span> 
        <div class="box-answer"> 其它</div>
    </label>
</div>

3

//核心css代码
//选择前的图片span样式
.box1{
    width: .5rem;
    height: .5rem;
    line-height: .4rem;
    background: url("../images/box1.png") no-repeat center;
    background-size: 100% auto;
    padding: 0 0 0 .1rem;
    box-sizing: border-box;
    float: left;
    color: #365d5c;
}
//选择后input会添加checked属性，紧接着的下个元素span改变样式
//点击后的样式在这里定义
.border-bottom>input:checked+span{
    background: url("../images/box2.png") no-repeat center;
    background-size: 100% auto;
    color: #fff;
}
//字体颜色改变
.border-bottom>input:checked+span+div{
    color: #365d5c;
}

如果满意的，请点个赞并转发下呗~