为何用:focus-within无法在单选框选中时修改父元素背景？

云上老周

2026-7-8

问题分析与修复方案

核心问题

你写的CSS选择器完全搞反了目标元素和触发条件：

你想要给wrapper容器加背景色，但当前选择器是给wrapper:focus-within下的选中状态单选框设置样式，而且单选框的默认背景样式会被浏览器覆盖，自然看不到效果。
另外你混淆了:focus-within和:checked的作用：:focus-within是容器内元素获得焦点时触发，:checked是单选框被选中的状态，两者逻辑不同。

修复方案

根据你的需求，分两种场景给出代码：

场景1：单选框被选中时，wrapper变色

利用CSS的:has()伪类（现代浏览器均支持），直接检测wrapper内是否包含选中的单选框：

.custom-radios div.wrapper {
  display: block;
  background-color: #F8FBFE;
  max-width: 400px;
  padding: 12px; /* 增加内边距，方便查看效果 */
  transition: background-color 0.2s; /* 可选：添加过渡动画 */
}

/* 当wrapper包含选中的单选框时，修改背景色 */
.custom-radios div.wrapper:has(input[type=radio]:checked) {
  background-color: #4199D5;
}

场景2：同时支持「选中变色」和「聚焦高亮」

如果要兼顾键盘导航时的聚焦状态（增强可访问性），可以结合:focus-within：

.custom-radios div.wrapper {
  display: block;
  background-color: #F8FBFE;
  max-width: 400px;
  padding: 12px;
  transition: all 0.2s;
}

/* 容器内元素获得焦点时，添加高亮轮廓 */
.custom-radios div.wrapper:focus-within {
  outline: 2px solid #4199D5;
  outline-offset: 2px;
}

/* 单选框选中时，修改容器背景色 */
.custom-radios div.wrapper:has(input[type=radio]:checked) {
  background-color: #4199D5;
}