css - 选择按钮时选择单选按钮列表的容器

Question

我有几个带有单选按钮的容器。我希望选定一个包含选定单选按钮的容器:

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>

为什么不起作用？

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