如何设置HTML单选框样式：隐藏原生按钮并实现选中变色

针对你提出的三个需求：隐藏原生单选按钮、选中时背景变色、保持单选不可取消的原生行为，下面是调整后的实现方案：

核心思路 #

• 完全隐藏原生radio元素，不占用页面空间且不可见
• 利用CSS选择器关联radio的选中状态与外部label的样式变化
• 保留radio的name属性一致性，维持原生单选的互斥行为（选中后无法取消，只能切换到同组其他选项）

修改后的HTML代码 #

<label class="radio">
    <input type="radio" name="radio-group">
    <span>5%</span>
</label>
<label class="radio">
    <input type="radio" name="radio-group">
    <span>10%</span>
</label>
<label class="radio">
    <input type="radio" name="radio-group">
    <span>15%</span>
</label>
<label class="radio">
    <input type="radio" name="radio-group">
    <span>25%</span>
</label>
<label class="radio">
    <input type="radio" name="radio-group">
    <span>50%</span>
</label>
<label class="custom-input">
    <input type="text" name="amount" value="40%">
</label>

注：给文本添加<span>是为了更灵活地控制样式，也可以省略直接使用label文本，但样式控制稍有限制

修改后的CSS代码 #

/* 完全隐藏原生单选按钮 */
.radio input[type="radio"] {
    appearance: none;
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

/* label基础样式 */
.radio {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0.25rem;
    background-color: hsl(183, 100%, 15%);
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* 选中时的label背景色 */
.radio:has(input[type="radio"]:checked) {
    background-color: hsl(172, 67%, 45%);
}

/* 兼容不支持:has()的浏览器方案 */
/* 如果需要兼容旧浏览器，可以将HTML调整为radio在label外，使用相邻兄弟选择器：
<input type="radio" name="radio-group" id="radio1">
<label class="radio" for="radio1">5%</label>
然后CSS：
input[type="radio"]:checked + .radio {
    background-color: hsl(172, 67%, 45%);
}
*/

/* 自定义输入框label样式（可选） */
.custom-input {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    margin: 0.25rem;
}
.custom-input input {
    padding: 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

关键点说明 #

1. 隐藏原生radio：通过appearance: none移除默认样式，配合绝对定位和透明化，让元素完全不可见且不占据布局空间，同时保留原生的表单交互逻辑。
2. 选中状态关联：使用:has()伪类检测label内部的radio是否被选中，从而修改label的背景色；如果需要兼容不支持:has()的浏览器（如旧版Chrome/Firefox），可以将radio放在label外部，通过+相邻兄弟选择器实现样式关联。
3. 保持原生单选行为：所有radio共享同一个name属性（示例中为radio-group），这会让浏览器自动维护互斥性——同一组内只能选中一个选项，选中后无法取消，必须切换到其他选项，完全符合原生单选按钮的行为。

内容的提问来源于stack exchange，提问作者Angel Umeh