如何为<form>标签外的单选按钮应用CSS选中态样式？

核心方案：使用CSS :has() 选择器 #

利用:has()选择器可以基于子元素的状态匹配父元素，从而关联radio和对应的label（前提是radio和label通过id与for属性正确绑定）。

假设你的HTML结构类似：

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

对应的CSS代码：

/* 选中状态样式 */
body:has(#opt1:checked) label[for="opt1"],
body:has(#opt2:checked) label[for="opt2"] {
  color: #1a73e8;
  font-weight: 600;
  border-bottom: 2px solid #1a73e8;
  /* 可根据需求添加其他样式，如背景色、padding等 */
}

/* 未选中状态基础样式（可选） */
label[for^="opt"] {
  padding: 4px 8px;
  cursor: pointer;
}

原理说明

:has(#opt1:checked)会匹配包含选中状态radio（id为opt1）的父元素（这里用body作为最外层容器，你也可以用radio和label所在的更具体的父容器，如果存在的话），随后通过label[for="opt1"]精准定位到对应的标签，为其设置选中样式。

兼容性说明

• Chrome、Edge、Safari 已原生支持:has()选择器；
• Firefox 需要在about:config中开启layout.css.has-selector.enabled选项才能生效。

备选方案（针对不支持:has()的旧浏览器） #

如果需要兼容不支持:has()的环境，可以利用radio的:focus状态做近似模拟（注意：这仅在radio获得焦点时生效，并非真正的选中状态，但可作为临时替代）：

input[type="radio"]:focus + label {
  outline: 2px solid #1a73e8;
  background-color: #f1f3f4;
}

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