如何通过CSS为被勾选单选框的外层label设置背景色

由于CSS原生不支持父元素选择器（除了尚未广泛兼容的:has()），而你的结构是<label>包裹<input type="radio">，常规兄弟选择器无法生效，这里提供两种可行方案：

方案1：JavaScript配合CSS类实现（推荐） #

通过监听单选框的change事件，给选中项的父级<label>添加自定义类，再用CSS类选择器设置背景色。

示例代码 #

HTML（Django渲染结构）

<label>
  <input type="radio" name="radio-group" value="opt1"> 选项1
</label>
<label>
  <input type="radio" name="radio-group" value="opt2"> 选项2
</label>

CSS

/* 选中状态的label样式 */
label.radio-checked {
  background-color: #cce5ff;
}

/* 可选：隐藏原生单选框，替换为自定义样式 */
label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* 自定义单选框外观 */
label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #6c757d;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* 选中时的自定义单选框样式 */
label.radio-checked::before {
  background-color: #007bff;
  border-color: #007bff;
}

JavaScript

// 监听所有单选框的change事件
document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', function() {
    // 清除同组所有单选框对应label的选中类
    document.querySelectorAll(`input[name="${this.name}"]`).forEach(r => {
      r.parentElement.classList.remove('radio-checked');
    });
    // 给当前选中项的父label添加类
    this.parentElement.classList.add('radio-checked');
  });
});

方案2：利用CSS变量和:focus（局限性大） #

如果仅需在单选框获得焦点时显示背景色（注意：选中后失去焦点会失效），可以利用:focus伪类结合CSS变量：

label {
  background-color: var(--radio-bg, transparent);
}

label input[type="radio"]:focus {
  --radio-bg: #cce5ff;
}

这种方法仅适用于需要焦点状态关联的场景，无法持久保留选中时的背景色，因此不推荐作为通用解决方案。

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