html - Change checkbox label css property with checkbox checked -

i have following html:

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

with css added background-color <label> tag.

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

now i'd liked change background color of label when checkbox checked. know how javascript, there way to using css?

i have seen solutions, use adjacent sibling selector , work when label appears after checkbox.

i still hope fix without javascript, have clue?

update:

as afraid of, cannot done way, must js, or achieve same visual effect different html structure. want set background color of label , textbox in 1 go, can go solution checkbox placed absolute on top of label. point planttheldea!

or can apply background color label , checkbox both.

thanks everyone!

you can achieve pure css so,

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

with css,

label { background-color:#333; color:#fff; }  input[type="checkbox"]:checked + label {     background: brown; } 

jsfiddle

keep in mind

the label has after checkbox need style around more keep same had.

here option of styling more have same appearance wanted, new fiddle. not involve positioning absolute, trickery.