Question

我讨厌CSS，我真的很喜欢。我认为这对你们大多数人来说都是微不足道的，所以请帮助我。我想创建一个radiobutton，它必须改变它所在的标签的背景颜色。这里的代码显然不起作用： JS：

<div className="container">
  <label className="check" htmlFor="id">
    <input {...radio.input} name="radio" type="radio" id="id" />
  </label>
</div>

和css：

.check {
background-color: green;
display: inline-block;
height: 34px;
position: relative;
width: 60px;
cursor: pointer;
}

.check input {
display:none;
}

input[type="radio"]:checked + .check {
background-color: blue; 
}

.container {
margin: 0 auto;
}

Answer 1

CSS中的+选择器选择HTML中的下一个元素。执行input + label不起作用，因为您的输入包含在标签中。

最简单的解决方案是在检查输入时应用checked CSS类做出反应。另一种选择是在输入标记之后放置标签，但这可能需要您应用更多CSS来获得所需的外观。

Answer 2

我真的很喜欢CSS，我真的很喜欢！ ;）

将您的HTML更改为：

<div className="container">
  <input {...radio.input} name="radio" type="radio" id="id" />
  <label className="check" htmlFor="id">
  </label>
</div>

并单独设置单选按钮的样式。

React和css用于收音机和标签

2 个答案: