当我的广播按钮检查时，标签不会更改背景颜色

Question

为什么在选中广播按钮时我的标签盒不更改颜色？我还尝试输入：检查+标签或〜标签{ 语法}，但仍然没有效果：

.ans{
  display: none;
}
.answer input[type="radio"]:checked+label{
  background-color: #FFA500;
}

.ans-list{
  border-style:solid;
  border-width:thin;
  margin:20% auto;
  width:50%;
}
.ans-list:hover{
  background-color:#D6D5A8;
  color:black;
}

<div class="answer an1">
  <label class="ans-list" for="ans1">1</label><input type="radio" name="q1" class="ans false" id="ans1"><br>
  <label class="ans-list" for="ans2">4</label><input type="radio" name="q1" class="ans true" id="ans2"><br>
  <label class="ans-list" for="ans3">3</label><input type="radio" name="q1" class="ans false" id="ans3"><br>
  <label class="ans-list" for="ans4">2</label><input type="radio" name="q1" class="ans false" id="ans4"><br>
  <button type="submit" name="Submit" class="submit">Submit</button>
  <button type="button" class="next hide" name="next">Next</button>
</div>

（ codepen ）

我也尝试了：

label{
  display:block;
  margin: 1rem auto;
  border-style:solid;
  width:50%;
}
input[type="radio"]:checked+label{
  background-color:red;
  color:red;
}

<label for="choice1"> <input type="radio" id="choice1" class="ans" name="op" checked="checked">male</label>
<label for="choice2"> <input type="radio" id="choice2" class="ans" name="op">male</label>
<label for="choice3"> <input type="radio" id="choice3" class="ans" name="op">male</label>

（ codepen ）

Answer 1

检查此内容您需要更改结构1st 输入 标签无法选择直接的先前兄弟姐妹，而您的代码（+）您正在选择下一个同胞。因此，您可以更改“标签”和“输入”的顺序，它将起作用

.ans{
  display: none;
}
.answer input[type="radio"]:checked+label{ background-color: #FFA500;}

.ans-list{
 border-style: solid;
    border-width: thin;
    margin: 0;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ans-list:hover{
  background-color:#D6D5A8;
  color:black;
}
button {
    margin: 25px 0;
    padding: 15px;
    display: inline-block;
}

<div class="answer an1">
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans1">
    <label class="ans-list" for="ans1">1</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans2">
    <label class="ans-list" for="ans2">2</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans3">
    <label class="ans-list" for="ans3">3</label>
  </div>
  <div class="answer-inner">              
    <input type="radio" name="q1" class="ans false" id="ans4">
    <label class="ans-list" for="ans4">4</label>
  </div>
  <button type="submit" name="Submit" class="submit">Submit</button>
  <button type="button" class="next hide" name="next">Next</button>
</div>

Answer 2

使用CSS，无法选择直接的先前兄弟姐妹，
使用您的代码（+），您将选择下一个兄弟姐妹。
因此，您只需更改“标签”和“输入”的顺序，它将起作用，但它将更改页面上元素的顺序。

---

选项1

纯CSS解决方案以保持布局未触及的是：

• 在flex div
• 交换标签中包装标签和按钮在HTML
• flex-Reverse中，该div

在视觉上是相同的，但现在您可以应用CSS选择器

<style>
.flex-rev {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
</style>
<div class="flex-rev">
    <input type="radio" name="q1" class="ans false" id="ans1">
    <label class="ans-list" for="ans1">1</label>
</div>
<div class="flex-rev">
    <input type="radio" name="q2" class="ans false" id="ans2">
    <label class="ans-list" for="ans2">2</label>
</div>
[.....]

使用纯CSS进行此工作。

---

选项2 ，

但是，恕我直言，最好的选择是添加一个小JS，将类添加到正确的标签中。它较慢，但

• 您可以推迟
• 它不会改变页面的布局和结构。

CSS部分

<style type="text/css">
 
label.selected {
   background-color: #FFA500;
}
</style>

JavaScript部分

<script type="text/javascript">
   // Get all inputs
   document.querySelectorAll('input[type="radio"]').forEach(function(i){
      // Add event listeners
      i.addEventListener('change', function(e){
         // when change, get all labels
         document.querySelectorAll('label').forEach(function(l){
            if (l.attributes.for.value == i.id) {
               // If for match with ID, add selected class
               l.classList.add('selected');
            } else { 
               // Clean others
               l.classList.remove('selected');
            }
         });         
      });
   })
</script>