How to change color of parent label when checking radio

Question

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)

You cannot select parent using css, you can only select child, or siblings — Abin Thaha, Oct 01 '21 at 05:50

Abin Thaha · Accepted Answer · 2021-10-01T06:03:35.550

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>

Thanks for your support. I did it and success :) – LXT Oct 01 '21 at 06:34 — LXT, Oct 01 '21 at 06:34

dave · Answer 2 · 2021-10-01T06:12:24.663

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>

Leena · Answer 3 · 2021-10-01T06:08:43.593

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>

Related: Change parent div on input[type=checkbox]:checked with css

How to change color of parent label when checking radio

3 Answers3