form表单单选

效果图：

html写法：

<form action="#" method="post">
    <input type="radio" name="remen" value="hot" ></div>
        </div>
        按评价排序
    </label>
</form>


css写法：

/*表单部分*/
main>form{
    display: flex;
}
main>form>input{
    display: none;
}
main>form>label{
    display: flex;
    margin-right:35px;
    margin-left: 2px;
    align-items: center;
}
.bigcircle{
    width:16px;
    height:16px;
    border-radius: 8px;
    display:flex;
    margin-right: 5px;
    justify-content: center;
    align-items: center;
    border:1px solid gray;
}
.littlecircle{
    width:8px;
    height:8px;
    border-radius: 4px;
}
main>form>input:checked+label .bigcircle{
    background-color: red;
    border:1px solid transparent;
}
main>form>input:checked+label .littlecircle{
    background-color: white;
}