Label not change background color when my radio button checked-CodePudding

please check this link Or this

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

CodePudding user response：

Check this you need to change the structure 1st input after label

.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 >
  <div >              
    <input type="radio" name="q1"  id="ans1">
    <label  for="ans1">1</label>
  </div>
  <div >              
    <input type="radio" name="q1"  id="ans2">
    <label  for="ans2">2</label>
  </div>
  <div >              
    <input type="radio" name="q1"  id="ans3">
    <label  for="ans3">3</label>
  </div>
  <div >              
    <input type="radio" name="q1"  id="ans4">
    <label  for="ans4">4</label>
  </div>
  <button type="submit" name="Submit" >Submit</button>
  <button type="button"  name="next">Next</button>
</div>

CodePudding user response：

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 >
    <input type="radio" name="q1"  id="ans1">
    <label  for="ans1">1</label>
</div>
<div >
    <input type="radio" name="q2"  id="ans2">
    <label  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>