Label not change background color when my radio button checked

Question

Why my label box not change the color when the radio button checked? I also try input:checked+label or ~label{ syntax} but still no effect :

 .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 )

I also tryed :

 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

Check this you need to change the structure 1st input after label there is no way to select direct previous siblings, with your code (+) you are selecting the next sibling. So you can just change the order of "label" and "input" and it will work

 .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

With CSS there is no way to select direct previous siblings, with your code (+) you are selecting the next sibling. So you can just change the order of "label" and "input" and it will work, but it will change the order of the elements on the page.

---

Option 1

The pure CSS solution to keep the layout untouched would be:

• wrap label and button inside a flex div
• swap label and input in HTML
• flex-reverse this div

Visually is the same, but now you can apply CSS selector

<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>
[.....]

This work with pure CSS.

---

Option 2

But, imho, the best option is adding a small js that add a class to the right label. It's slower but

• you can defer it
• it doesn't change the layout and the structure of the page.

CSS part

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

Javascript part

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