实现单选（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;}

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