How to change color of parent label when checking radio [duplicate]-CodePudding

All I want is when I check the radio box or somewhere in label, the radio is checked and background color of label is change.

<div class="answer">
  <label for="answer-1" class="radio-label">
    <div class="answer-radio">
      <input type="radio" class="space" id="answer-1" name="answer-element" />
      <span for="answer-1">True</span>
    </div>
  </label>
  <label for="answer-2" class="radio-label">
    <div class="answer-radio">
      <input type="radio" class="space" id="answer-2" name="answer-element" />
      <span for="answer-2">False</span>
    </div>
  </label>
</div>

As if when I have not checked yet, bg-color is blue, and when I had checked, the bg-color is green.

My question is how can I css this without using javascript (Only html & css)

CodePudding user response：

With much lesser coding and without JavaScript, you can achieve what you are looking for as below.

I have used css selector to select the sibling label instead of parent. And I am changing the bg-color as required.

If you are planning to apply the background-color for the whole row/including checkbox, you can customise the label/checkbox and it would work as expected too

label {
  display: inline-block;
  background-color: blue;
  padding: 10px;
  padding-left: 30px;
  width: 200px;
  cursor: pointer;
}

input:checked   label {
  background-color: green;
}

input {
  width: 0;
  height: 0;
  visibility: hidden;
  position: absolute;
}

.answer-radio {
  position: relative;
}

label::before,
label::after {
  content: "";
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  left: 5px;
  top: 10px;
}

label::before {
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
}

label::after {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  left: 9px;
  top: 14px;
  display: none;
}

input:checked   label::after {
  display: inline-block;
}

<div class="answer">
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-1" name="answer-element" />
    <label for="answer-1" class="radio-label">True</label>
  </div>
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-2" name="answer-element" />
    <label for="answer-2" class="radio-label">False</label>
  </div>
</div>

CodePudding user response：

There is no possible way of selecting the parent element when the input is checked so there must be some javascript used. Although there is an alternative of doing this. Please find the code below.

label{
  display:flex;
  }
  
  input:checked   .answer-radio{
  background-color:purple;
  }

  <label for="answer-1" class="radio-label">
  <input type="radio" class="space" id="answer-1" name="answer-element" />
    <div class="answer-radio">
      <span for="answer-1">True</span>
    </div>
  </label>

  <label for="answer-2" class="radio-label">
  <input type="radio" class="space" id="answer-1" name="answer-element" />
    <div class="answer-radio">
      <span for="answer-2">True</span>
    </div>
  </label>

CodePudding user response：

Instead of labelling your radio buttons inside span tags, use your label tag to identify each radio. If you restructure your HTML so your labels are adjacent to your radio buttons, you can use the CSS adjacent sibling combinator to select them, and add your CSS properties:

input[type="radio"]   label {
  background-color:#add8e6;
}

input[type="radio"]:checked   label {
  background-color: #90ee90;
}

<div class="answer">

  <div class="answer-radio">
    <input type="radio" class="space" id="answer-1" name="answer-element" />
    <label for="answer-1" class="radio-label">True</label>
  </div>
  <div class="answer-radio">
    <input type="radio" class="space" id="answer-2" name="answer-element" />
    <label for="answer-2" class="radio-label">False</label>
  </div>
</div>