Change checkbox label css property with checkbox checked

Question

I have the following html:

  
     
     my checkbox text
  
         


        

Answer 1

You can achieve this with pure css like so,

     my checkbox text

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.