2021-08-04

改变单选按钮样式代码片段

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;
}

里面的代码对于大佬来说是小菜一碟，不管怎么样，希望你们看到这些或多或少有一些帮助。