在 CSS 中，为选中的 <input> 选择父 <label>

Question

编辑：显然不能使用 大括号或隐藏名称？...

我已经看到这个问题的一些变体，但是我发现没有一个适合我的特定问题，我认为这是一个简单的问题。我正在反应中创建以下单选按钮组：

    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 处理函数工作的唯一方法是将输入放在标签内，就像这样，然后在每个 .map 循环中返回 label。

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

所以我的问题是，我如何在 CSS 中获取与点击的输入相对应的标签。我想在未单击/未单击时更改整个标签的颜色和背景，因此选择跨度无济于事（因为这只会更改文本颜色/背景，而不是整个标签。

提前致谢！！

Answer 1

CSS 可以选择子元素和兄弟元素，但不能选择父元素。我经常隐藏默认的单选按钮和复选框并创建自己的，如下所示：

.button-group{
  font-size:0; /*Prevents a space from occuring between buttons*/
}
.button-group input{
  position:absolute; 
  visibility:hidden; /* display:none causes some browsers to ignore the input altogether */
}
.button-group input+span{
  display:inline-block;
  line-height:20px;
  font-size:1rem;
  vertical-align:top;
  padding:0 10px;
  color:#000;
  border-left:1px solid #a00;
}
.button-group label:first-child input+span{
  border-radius:10px 0 0 10px;
  border-left:0;
}
.button-group label:last-child input+span{
  border-radius:0 10px 10px 0;
}
.button-group input:not(:checked)+span{
  background-color:#faa;
}
.button-group input:not(:checked)+span:hover{
  background-color:#f66;
}
input[type=radio]:checked+span{
  background-color:#f33;
}

<div class="button-group">
  <label>
    <input type="radio" value="1" name="myfield" />
    <span>Option 1</span>
  </label>

  <label>
    <input type="radio" value="2" name="myfield" />
    <span>Option 2</span>
  </label>

  <label>
    <input type="radio" value="3" name="myfield" />
    <span>Option 3</span>
  </label>
</div>

Answer 2

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

您可以使用<React.Fragment> <input /> <span /> </ReactFragment> 返回多个元素，而无需在 div 或 span 中呈现它们