效果图:
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;
}