选择按钮时选择单选按钮列表的容器答案

【问题标题】：Select a container of a radio button list when a button gets selected选择按钮时选择单选按钮列表的容器
【发布时间】：2018-06-10 13:11:32
【问题描述】：

我有几个带有单选按钮的容器。我希望选中单选按钮的容器：

input[type="radio"]:checked+.container {
  border: 5px solid red;
}

<div class="container">
  <input class="btn-radio" type="radio" value="123" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="1234" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="12345" name="rd" />
</div>

为什么它不起作用？

【问题讨论】：

这可能会帮助你stackoverflow.com/questions/43589287/…
实际上，您正在选择类 .container 的元素紧邻 input，但在您的 html 中它是父元素。您可能希望在输入旁边使用其他元素，并且可以使用+ 来选择它并相应地添加您的样式。 :)
@Manjunath 如何选择父“.container”？
在 css 中你不能选择 bt 你可以用 jQuery 或 JavaScript 在检查输入时在容器上添加活动类

标签： css html css-selectors

【解决方案1】：

这是我上面评论的工作代码

input[type="radio"]:checked + .border {
    border: 5px solid red;
}

.container {
    position: relative;
    max-width: 100px;
    margin: 10px;
}

input {
    position: relative;
    z-index: 100;
}

.border {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

<div class="container">
    <input class="btn-radio" type="radio" value="123" name="rd" />Input 1
    <div class="border"></div>
</div>
<div class="container">
    <input class="btn-radio" type="radio" value="1234" name="rd" />Input 2
    <div class="border"></div>
</div>
<div class="container">
   <input class="btn-radio" type="radio" value="12345" name="rd" /> Input 3
     <div class="border"></div>
</div>

【讨论】：

我在容器中没有<div class="border"></div>，也不想拥有它

【解决方案2】：

这里是一个没有新元素的解决方案，你可以使用输入的::before在容器上做边框。祝你好运！

.container {
  position: relative;
  margin-bottom: 2em;
}

input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 5px solid red;
}

    <div class="container">
      <p>container 123</p>
      <input class="btn-radio" type="radio" value="123" name="rd" />
    </div>


    <div class="container">
    <p>container 1234</p>
      <input class="btn-radio" type="radio" value="1234" name="rd" />
    </div>


    <div class="container">
    <p>container 12345</p>
      <input class="btn-radio" type="radio" value="12345" name="rd" />
    </div>

【讨论】：

【解决方案3】：

使用 id 设置。给他们单独的 ID。

#id:checked + .container {
    border: 5px solid red;;
}

为了获得更好的结果，也可以使用容器的 id。

【讨论】：