改变单选或多选的，前面默认圆圈的样式

html代码：

<form action="" method="post">
    <!--使用label for的属性值和input id 的属性值相同，
    让文本和圆圈关联，这样就算不直接点击圆圈，
    直接点击文本也可以选中想要的选择-->
   <!--例如：-->

<div>
    <section>
        <input type="radio" id="1" name="xuan">
        <label for="1">按照热门排序</label>
    </section>
    <section>
        <input type="radio" id="2" name="xuan">
        <label for="2">按照年代排序</label>
    </section>   
    <section>
        <input type="radio" id="3" name="xuan">
        <label for="3">按照爱好排序</label>
    </section>
</div>
</form>　　

css代码

input{
    display: none;
}
label:before{
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #db403b;
    border-radius: 50%;
}
label:after{
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #92c3e0;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top:5px;
    display: none;
}
section{
    position: relative;
    margin-right: 5px;
}
input:checked+label:after{
    display: inline-block;
}
div{
    display: flex;
}