求助：React+CSS实现单选按钮选中时切换所在Label背景色

嘿，我太懂这种被CSS搞疯的感觉了！别发愁，这个问题其实超容易解决，核心就是利用CSS选择器关联单选按钮的状态和Label的样式～

方案一：用:has()伪类（现代浏览器首选） #

你的DOM结构不用改，只需要修改CSS，利用:has()伪类匹配包含选中单选按钮的Label：

.check {
  background-color: green;
  display: inline-block;
  padding: 8px 16px; /* 加点内边距，让点击区域更友好 */
  cursor: pointer;
}

/* 当Label里的单选按钮被选中时，改变Label背景色 */
.check:has(input[type="radio"]:checked) {
  background-color: blue; /* 换成你想要的选中态颜色 */
}

/* 可选：隐藏原生单选按钮，让Label看起来像自定义按钮 */
.check input[type="radio"] {
  display: none;
}

:has()是CSS新出的伪类，现在主流浏览器（Chrome、Firefox、新版Safari）都支持，写法最直观，不用调整DOM结构。

方案二：相邻兄弟选择器（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器（比如IE或老版Safari），可以稍微调整DOM结构，把单选按钮移到Label外面，用+相邻选择器关联：

修改后的JSX：

<div className="container">
  <input {...radio.input} name="radio" type="radio" id="id" />
  <label className="check" htmlFor="id"></label>
</div>

对应的CSS：

.check {
  background-color: green;
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
}

/* 单选按钮选中时，改变相邻Label的背景色 */
input[type="radio"]:checked + .check {
  background-color: blue;
}

/* 同样可以隐藏原生单选按钮 */
input[type="radio"] {
  display: none;
}

小提醒 #

记得同组的单选按钮要保持name属性一致（你代码里已经写了name="radio"，这点没问题），这样才能实现互斥选择的功能哦～

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