编辑：显然不能使用〈〉大括号或它隐藏名称？
我已经看到了这个问题的一些变体，但是没有一个符合我的特定问题，我认为这是一个简单的问题。我在react中创建了下面的单选按钮组：

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

这里是我目前的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;
}

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

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

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

不幸的是，CSS没有按预期工作。特别是，下面的选择-input [type = radio]：checked + label不起作用，因为没有紧接在 * input * 后面的 * label *。到目前为止，我成功地让react onChange处理函数工作的唯一方法是将input放在label内部，就像这样，然后在每个. map循环中返回 * label *。

• 由于返回值必须是单个元素，如果我想从 * label * 中取出，我需要将它们都包含在 * div * 或 * span * 中，由于某种原因，这样做会破坏我的onChange处理程序...

所以我的问题是，如何如何我可以，在CSS中，抓住 * 标签 *，对应于点击的 * 输入 *。我想改变整个标签的颜色和背景时，它是/不是点击，所以选择跨度没有帮助（因为这只改变文本的颜色/背景，而不是整个标签）。
提前感谢!!