React中CSS选中被勾选input对应父label的实现方案

嘿，我之前也碰到过一模一样的问题！核心原因就是CSS目前还没有原生的父选择器，你原来写的input[type=radio]:checked + label是找选中input的下一个同级label，但现在input是label的子元素，这个选择器完全派不上用场。下面给你两个靠谱的解决思路：

方法1：用CSS :has()伪类（推荐，现代浏览器直接用） #

现在主流浏览器都支持:has()伪类了，它能让我们根据子元素的状态来给父元素加样式，完美适配你现在的嵌套结构。只需要把原来的选中样式选择器改成这样：

label:has(input[type=radio]:checked) {
  color: red;
  background: #333;
}

另外你原来的label + input[type=radio] + label选择器也得调整，因为现在同级的是label元素，直接改成：

.radio-group label + label {
  border-left: solid 2px blue;
}

修改后的完整CSS代码：

input[type=radio] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: #333;
  background: #EEE;
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 20px;
  border: 2px solid orange;
}

/* 关键修改：用:has选中包含选中input的label */
label:has(input[type=radio]:checked) {
  color: red;
  background: #333;
}

/* 调整相邻label的左边框 */
.radio-group label + label {
  border-left: solid 2px blue;
}

.radio-group {
  border: solid 2px green;
  display: inline-block;
  margin: 20px;
  border-radius: 10px;
  overflow: hidden;
}

方法2：回退方案（兼容旧浏览器） #

如果你的项目需要兼容不支持:has()的旧浏览器（比如IE），那可以稍微调整下React的结构，把<input>挪到<label>外面，用for属性关联两者（记得给每个input加唯一id），这样就能继续用原来的相邻兄弟选择器了：

修改后的React代码：

const myOptions = ["YTD", "Week", "Month", "Pre AS", "Post AS"];
const myButtons = (
  <form>
    <div className="radio-group">
      {myOptions.map((d, i) => {
        const id = `radio-option-${i}`;
        return (
          <React.Fragment key={id}>
            <input
              id={id}
              type="radio"
              value={d}
              checked={timeframeNew === d}
              onChange={this.handleTimeframeNewChange}
            />
            <label htmlFor={id}>
              <span>{d}</span>
            </label>
          </React.Fragment>
        );
      })}
    </div>
  </form>
);

对应的CSS可以保留你原来的选中样式，只需要调整下相邻元素的选择器：

input[type=radio]:checked + label {
  color: red;
  background: #333;
}

input[type=radio] + label + input[type=radio] + label {
  border-left: solid 2px blue;
}

小提醒 #

• 第一种方法的:has()伪类支持Chrome 105+、Firefox 121+、Safari 15.4+，如果你的项目不用兼容这些版本之前的浏览器，强烈推荐用这个，不用改React结构，代码更清爽。
• 把input嵌套在label里的做法本身是没问题的，点击label任何地方都能触发input的状态变化，符合无障碍设计的要求哦。

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