提问人：HerbsBots00 提问时间：10/31/2023 最后编辑：QuentinHerbsBots00 更新时间：11/1/2023 访问量：37
有没有办法设计单选按钮
Is there a way I can design the radio button
问：
如何设置以下 HTML 元素的样式 -
.input-box input[type=radio]:checked ~ .check::before{
background: #0DFF92;
}
.input-box input[type=radio]:checked ~ label{
color: #0DFF92;
}
.input-box input[type=radio]:checked ~ .check {
border: 5px solid #0DFF92;
}<div class='container'>
<div class="input-container">
<div class="input-box">
<input type="radio" id="fiction" name="selector">
<label for="fiction">Fiction</label>
<div class="check"></div>
</div>
<div class="input-box">
<input type="radio" id="non-fiction" name="selector">
<label for="non-fiction">Non-fiction</label>
<div class="check"></div>
</div>
</div>
</div>这样，当单击自定义检查按钮时，它会与标签一起改变颜色。
答：
0赞
Really Bad Dev
11/1/2023
#1
确保添加到您的 CSS。这将删除默认样式并允许您更改它。appearance: none;
例：
.input-box input[type=radio]:checked ~ .check::before{
appearance: none;
background: #0DFF92;
}
来源：MDN Web Docs
评论