Question

我正在尝试编辑单选按钮在CSS中的显示方式，并尝试使用包含该按钮的标签而不使用功能标签。

换句话说，我不想使用它：

 <input type="radio" name="rb" id="rb2" />
  <label for="rb2">Hello</label>

我想用这个：

<label><input type="radio" name="rb" />Hello</label>

原因是HTML是动态生成的，我无法在输入中创建id或其他字段。当我添加css来修改按钮/文本时，它不起作用，因为它要求标签仅在文本上，并且＆＃34;对于＆＃34;要使用的。这是CSS：

.container{
  display: block;
  position: relative;
  margin: 40px auto;
  height: auto;
  width: 500px;
  padding: 20px;
    font-family: 'Lato', sans-serif;
    font-size:18px;
    border:2px
solid #ccc;
overflow-y: scroll;
resize: both;
}

.container input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

.container input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

.container input[type=radio]:checked ~ label{
  color: #0DFF92;
}

如果我把

放进去

    <div class="container>
<input type="radio" name="rb" value="Hello" id=rb2"/>
      <label for="rb2">Hello</label>
<input type="radio" name="rb" value="Goodbye" id="rb3"/>
      <label for="rb3">Goodbye</label>
</div>

但不是

    <div class="container>
   <label> <input type="radio" name="rb" value="Hello">Hello</label>
 <label><input type="radio" name="rb" value="Goodbye">Goodbye</label>
    </div>

有什么建议吗？非常感谢你！

Answer 1

你必须使用javascript。您无法在css中导航回到dom树，因此您希望输入位于标签内并且css根据输入影响标签，您必须使用js来检测更改并应用样式为其父母。

使用CSS修改无标签的单选按钮fol =＆＃34; id＆＃34;？

1 个答案: