lasertits
Active member
Edit: Ended up going with JS for this... CSS just wasn't gonna work. Mods can delete this I suppose.
I'm trying to customize the look of the checkboxes and radio buttons for my XF theme, however I noticed XF's markup is different than all the tutorials I've read regarding this.
The tutorials give the following markup as the example:
However, XF's markup when it comes to input checkboxes/radio buttons is as follows:
It puts the input inside the label. I looked into this and found various reasons as to why it's this way, but didn't find anything that would help with custom checkboxes in CSS.
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?
The labels have a common attribute, "ctrl_" however this is also used on labels that aren't wrapped around checkboxes, otherwise using something like label[for$=ctrl] { ... } might have worked...
Any help / insight would be greatly appreciated!
Thanks.
Edit: After looking into this further, JS might be my only solution...
I'm trying to customize the look of the checkboxes and radio buttons for my XF theme, however I noticed XF's markup is different than all the tutorials I've read regarding this.
The tutorials give the following markup as the example:
PHP:
<input type="checkbox" id="c1" name="cc" />
<label for="c1">Check Box 1</label>However, XF's markup when it comes to input checkboxes/radio buttons is as follows:
PHP:
<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'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?
The labels have a common attribute, "ctrl_" however this is also used on labels that aren't wrapped around checkboxes, otherwise using something like label[for$=ctrl] { ... } might have worked...
Any help / insight would be greatly appreciated!
Thanks.
Edit: After looking into this further, JS might be my only solution...
