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

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

Ответ 1

Если вы можете редактировать разметку для обертывания фактического текста ярлыка, например:

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

Вы можете снять некоторые трюки с помощью 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;  
}

Демо: http://jsfiddle.net/dMhDM/1/

Имейте в виду, что это не удастся, если браузер не поддерживает :checked.

Это в основном то же самое, что и в другом решении, но выполнение стиля выполняется на пролете, а не на ярлыке.

Ответ 2

К сожалению, CSS не позволяет стилизовать родительские элементы на основе дочерних элементов, что было бы простым примером:

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

Противоположность выбора дочернего элемента на основе родителя:

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

То, что вы хотите сделать, может быть достигнуто с помощью jQuery.

Отметьте этот пост.

Ответ 3

Очень интересный вопрос. По правде говоря, я уверен, что просто невозможно с помощью CSS.

Если есть какой-то шаблон для метки для атрибута (ctrl_enable_rte), вы надеетесь на это. Например, если все метки меток заканчиваются на rte, вы можете использовать

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

Если такого шаблона нет, а идентификаторы флажка выбраны произвольно, вам придется прибегнуть к JavaScript.