Change checkbox label css property with checkbox checked

Question

I have the following html:

  <label>
     <input type="checkbox" value="cb_val" name="cb_name">
     my checkbox text
  </label>

With CSS I added a background-color to the <label> tag.

label { background-color:#333; color:#FFF; }

Now I'd liked to change the background color of the label when the checkbox is checked. I know how to do it with javascript, but is there a way to to it just using CSS?

I have seen some solutions, but they use the adjacent sibling selector and only work when the label appears after the checkbox.

I still hope to fix this without javascript, does anyone have a clue?

UPDATE:

As I was afraid of, it cannot be done this way, so i must do it with JS, or achieve the same visual effect with a different HTML structure. I want to set the background color of the label and the textbox in one go, so I can go with a solution where the checkbox is placed absolute on top of the label. Good point PlantTheldea!

Or I can apply the background color to the label and the checkbox both.

Thanks everyone!

There's no parent selector yet so you can't change the parent label element based on the condition of the child input element. Without JavaScript. — j08691
– j08691, Commented Jan 10, 2014 at 15:46

Josh Powell · Accepted Answer · 2014-01-10 16:02:30Z

20

You can achieve this with pure css like so,

<input type="checkbox" id="cb_1" value="cb_val" name="cb_name">
<label for="cb_1">
     my checkbox text
</label>

With this css,

label { background-color:#333; color:#FFF; }

input[type="checkbox"]:checked + label {
    background: brown;
}

JSFIDDLE

Keep in mind

The label has to be after the checkbox so you will need to style it around more to keep the same look you had.

Here is an option of styling it more to have the same appearance as you wanted, New fiddle. THIS DOES NOT involve positioning anything absolute, just some trickery.

edited Jan 10, 2014 at 16:02

answered Jan 10, 2014 at 15:46

Josh Powell

6,2935 gold badges33 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michiel Over a year ago

I am aware of this, but in your case the input is not nested in label. I even said in my questtion i am aware of this solution using the adjacent sibling selector (+).

PlantTheIdea Over a year ago

@MichielReyers - the question then becomes why you need it nested in the label? every browser in the universe will work if you set the for property. i edited the answer to show this, and if u click the label it will click the checkbox.

Josh Powell Over a year ago

@MichielReyers You stated you know how to do this with a script, then you ask for a pure css solution. That is the pure css solution. I also stated, "The label has to be after the checkbox so you will need to style it around more to keep the same look you had.".

Michiel Over a year ago

@PlantTheldea You are right, I want to set the background color of the label and the textbox in one go, I can go with a solution where the checkbox is placed absolute on top of the label. Good point!

PlantTheIdea Over a year ago

@MichielReyers - position:absolute will work, but I was not advocating it. by giving the checkbox an id, and then setting the for attribute of the label to match the id, you will create the "all in one" relationship you are looking for. see the updated answer and jsFiddle.

|

Community · Accepted Answer · 2020-06-06 12:01:45Z

You can't style the label itself directly via only CSS when the label is checked, but you can style a sibling of the checkbox.

http://jsfiddle.net/QdDpL/

HTML

<label>
    <input class="check" type="checkbox" />
    <span class="label-text">Checkbox</span>
</label>

CSS

label {
    background: yellow;
}
label .label-text {
    background: cyan;
}
label input.check:checked + .label-text {
    background: lime;
}

You may also be able to fiddle with floats and padding to make the checkbox appear as if it was inside the .label-text span.

See the following links for browser support on the sibling selector: http://caniuse.com/css-sel2

Alternately as another answer said, you can style the label if it is a sibling of the checkbox - but then just like my answer still would not contain the checkbox in the label.

Collectives™ on Stack Overflow

Change checkbox label css property with checkbox checked

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related