改变单选按钮样式代码片段
html部分代码:
<div class="body_bb">
<ul>
<li>
<input type="radio" name="rd" id="rd_a" value="按热门排序" checked>
<label for="rd_a">按热门排序</label>
</li>
<li>
<input type="radio" name="rd" id="rd_b" value="按时间排序">
<label for="rd_b">按时间排序</label>
</li>
<li>
<input type="radio" name="rd" id="rd_c" value="按评价排序">
<label for="rd_c">按评价排序 </label>
</li>
</ul>
</div>
css部分代码:
.move .body_a .body_aa .body_bb ul li input{
display: none;
}
.move .body_a .body_aa .body_bb ul li label{
position: relative;
margin-right: 30px;
}
.move .body_a .body_aa .body_bb ul li label::before{
content: "";
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 6px;
margin-top: -3px;
}
.move .body_a .body_aa .body_bb ul li input:checked+label::before{
background-color: #ef4238;
}
.move .body_a .body_aa .body_bb ul li input:checked+label::after{
position: absolute;
left: -22px;
top: 5px;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
}