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 the answer involved changing the markup, and that's something I want to avoid which I'll explain below.

I'm trying to add custom css3 checkboxes and radio buttons to my XenForo forum theme, and all the tutorials I've read on this have the label after the input:

<input type="checkbox" id="c1" name="cc" /> <label for="c1">Check Box 1</label> 

However in XenForo's markup the input is inside the label:

<label for="ctrl_enable_rte"> <input type="checkbox" name="enable_rte" value="1" id="ctrl_enable_rte" {xen:checked "{$visitor.enable_rte}"} /> {xen:phrase use_rich_text_editor_to_create_and_edit_messages} </label> 

I looked into why this is, but didn't find anything related to custom css checkboxes/radio buttons when the markup is this way. I want to avoid having to change the markup, because I'm dealing with a forum system here, and that would involve editing a bunch of core templates... which I'd have to then update the markup on each time the forum software put out an update (presuming the templates changed).

I've tried to create CSS rules that would work with this type of markup, but thus far I've been unsuccessful. I'm not too experienced with CSS, don't have every selector memorized, and pseudo classes are still pretty foreign to me, so I was hoping someone here could shed some light on if this will be possible, and if so, how I might go about it. I already have my sprite ready to go, I just need to figure the CSS out.

My main issue is I can't figure out how to select the label (only the labels involved with these inputs of course). Usually something like

input[type="checkbox"] + label 

is used, but when the label isn't after the input and instead outside/before it... how do I select it?

Answer 1

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

<label>     <input type="checkbox">     <span>One</span> </label> <label>     <input type="checkbox">     <span>Two</span> </label> <label>     <input type="checkbox" disabled>     <span>Three</span> </label> 

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:

label {   position: relative;   cursor: pointer; }  label [type="checkbox"] {   display: none; }  [type="checkbox"]+span {   display: inline-block;   padding: 1em; }  :checked+span {   background: #0f0;   display: inline-block; }  [type="checkbox"][disabled]+span {   background: #f00; }

<label>     <input type="checkbox">     <span>One</span> </label> <label>     <input type="checkbox">     <span>Two</span> </label> <label>     <input type="checkbox" disabled>     <span>Three</span> </label>

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.