Change checkbox label css property with checkbox checked

checkbox, css, html

Solution

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.

Problem

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!

Original source