CSS checkboxes & radio buttons when input is inside label?

Question

I\'ve searched extensively on here for an answer to this but haven\'t quite come across what I\'m looking for. Found this CSS - How to Style a Selected Radio Buttons Label? but

Answer 1

If you can edit the markup to wrap the actual label text, for example:

    
    One


    
    Two


    
    Three

You can pull off some tricks with CSS:

label {
    position:relative;   
    cursor:pointer;
}
label [type="checkbox"] {
    display:none; /* use your custom sprites instead as background on the span */
}
[type="checkbox"] + span {
    display:inline-block;
    padding:1em;
}
:checked + span {
    background:#0f0;
}
[type="checkbox"][disabled] + span {
    background:#f00;  
}​

Demo: http://jsfiddle.net/dMhDM/1/

Keep in mind that this will fail if the browser doesn't support :checked.

This is basically the same as the other solution, but the stying is done on the span rather than the label.