Change background color of label when input radio is checked

Question

I have a label wrapping an input radio button, what I want is that when the user clicks on the input radio, the label wrapping the radio changes its background color. How can I achieve that?

.radio-label {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}

.radio-label:hover {
  background-color: #e5e5e5;
  color: var(--black);
}

.radio-label input {
  height: 1rem;
  width: 1rem;
  margin-right: 0.6rem;
  cursor: pointer;
  border: none;
}

.radio-label input:checked .radio-label {
  background-color: var(--orange);
  color: var(--black);
}

<label className="radio-label">
        <span>Test</span>
          <input    type="radio" name="test" id="test1" />
   </label>

You will have to put the input first and the label after it. Then you can use one of the sibling combinators (~ or +) to select the input. — agrm, Sep 26 '22 at 19:08
There is the `:has()` pseudo class, but browser support isn't very great . You could do `label:has(input:checked)`. — agrm, Sep 26 '22 at 19:10

score 1 · Accepted Answer · answered Sep 26 '22 at 19:11

Your problem is you are trying get radio label in the checked input with, .radio-label input:checked .radio-label

If you change it from

.radio-label input:checked .radio-label {
  background-color: var(--orange);
  color: var(--black);
}

to

.radio-label:has(> input:checked) {
  background-color: var(--orange);
  color: var(--black);
}

It's should work for your case.

Note: This feature has not support on some spesific browser, MDN

Verified that this works with OPs markup +1 – Yogi Sep 26 '22 at 19:23 — Yogi, Sep 26 '22 at 19:23

score 0 · Answer 2 · answered Sep 26 '22 at 19:15

You don't Have To wrap your input inside the <label> & Labels can also have text in them.no need to add a span inside aswell.

.radio-label {
  width: 10px;
  height: 10px;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}

.radio-label:hover {
  background-color: #e5e5e5;
  color: var(--black);
}

#test1 {
  height: 1rem;
  width: 1rem;
  margin-right: 0.6rem;
  cursor: pointer;
  border: none;
}

#test1:checked~.radio-label {
  background-color: orange;
  color: black;
}

<input type="radio" name="test" id="test1" />
<label for="test1" class="radio-label">Test</label>

score 0 · Answer 3 · answered Sep 26 '22 at 20:26

.radio-label {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}

.radio-label:hover {
  background-color: #e5e5e5;
  color: var(--black);
}

.radio-label input {
  height: 1rem;
  width: 1rem;
  margin-right: 0.6rem;
  cursor: pointer;
  border: none;
}

input[type=radio]:checked+label {
    background-color: orange;
    color: black;
}

<input type="radio" name="test" id="test1" />
<label class="radio-label">Test</label>

Change background color of label when input radio is checked

3 Answers3