form表单单选

效果图：

html写法：

<form action="#" method="post">
    <input type="radio" name="remen" value="hot" id="hot"/>
    <label for="hot">
        <div class="bigcircle">
            <div class="littlecircle"></div>
        </div>
        按热门排序
    </label>
    <input type="radio" name="remen" value="time" id="time"/>
    <label for="time">
        <div class="bigcircle">
            <div class="littlecircle"></div>
        </div>
        按时间排序
    </label>
    <input type="radio" name="remen" value="value" id="value"/>
    <label for="value">
        <div class="bigcircle">
            <div class="littlecircle"></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;
}

转载于:https://www.cnblogs.com/qlongbg/p/9312196.html