CSS флажки и переключатели при вводе внутри метки?

Я подробно искал здесь ответ на этот вопрос, но не совсем понял, что ищу. Нашел это CSS - Как стилизовать выбранную метку кнопок с радио?, но ответ включал в себя изменение разметки и что-то, чего я хочу избежать, о чем я расскажу ниже.

Я пытаюсь добавить пользовательские флажки css3 и переключатели к моей теме форума XenForo, и все обучающие материалы, которые я прочитал на этом, имеют метку после ввода:

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

Однако в разметке XenForo вход внутри метки:

<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>

Я искал, почему это так, но не нашел ничего, связанного с пользовательскими css checkboxes/radio buttons, когда разметка таким образом. Я хочу избежать изменения разметки, потому что я имею дело с системой форума здесь, и это потребует редактирования кучи основных шаблонов..., которые я должен был бы затем обновить разметку при каждом использовании программного обеспечения форума выпустить обновление (предполагая, что шаблоны изменены).

Я попытался создать правила CSS, которые будут работать с этим типом разметки, но до сих пор я не увенчался успехом. Я не слишком разбираюсь в CSS, не знаю, что каждый селектор запомнил, а псевдо-классы по-прежнему довольно чужды мне, поэтому я надеялся, что кто-то здесь может пролить свет, если это будет возможно, и если да, то как я может пойти об этом. У меня уже есть спрайт, который мне нужен, мне просто нужно вычислить CSS.

Моя основная проблема заключается в том, что я не могу понять, как выбрать метку (конечно, только метки, связанные с этими входами). Обычно что-то вроде

input[type="checkbox"] + label

но когда метка не находится после ввода, а вместо нее/перед... как ее выбрать?

Ответы

<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>

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;  
}​

div.a < div { border: solid 3px red; }

div.a > div { border: solid 3px red; }

label[for$=rte] { ... }