Question

编辑：显然无法使用＆lt;＆gt;大括号还是隐藏名字？...

我已经看到了这个问题的一些变体，但是我找到的任何一个都不符合我的特定问题，我认为这是一个简单的问题。我正在创建以下单选按钮组：

    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没有按预期工作。特别是，以下选项 - 输入[type = radio]：选中+标签不起作用，因为输入后没有标签 。到目前为止，我能够成功地使我的反应onChange处理函数工作的唯一方法是将输入放在标签内部，就像这样，然后在每个.map循环中返回标签。

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

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

提前致谢!!

Answer 1

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

中

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

2 个答案: