首页 文章

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

提问于
浏览 次
0

编辑：显然无法使用<>括号或隐藏名称？...

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

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 不起作用，因为输入后没有标签 . 到目前为止，我能够成功地让我的反应onChange处理函数工作的唯一方法是将输入放在标签内部，就像这样，然后在每个.map循环中返回标签 .

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

所以我的问题是， how how how 我可以在CSS中获取与点击输入相对应的标签 . 我想更改整个标签's color and background when it is / isn' t点击，因此选择 Span 没有帮助（因为这只会更改文本颜色/背景，而不是整个标签 .

提前致谢！！

css reactjs

2 回答

  • 1

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

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

    回复于
  • 2

    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>
    回复于

相关问题