CSS Checkboxen & amp; Radio-Buttons, wenn die Eingabe ist innerhalb Label?

Ich gesucht habe ausgiebig auf hier für eine Antwort auf diese, aber noch nicht ganz kommen über das, was ich Suche. Fand diese CSS - How zum Stil einer Ausgewählten Radio-Buttons Label? aber die Antwort einbezogen änderung des markup, und das ist etwas, was ich vermeiden möchte, das erkläre ich weiter unten.

Ich versuche, fügen Sie benutzerdefinierte css3 Checkboxen und radio-buttons, um meine XenForo-forum-Thema, und alle tutorials, die ich gelesen habe auf dem Etikett nach der Eingabe:

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

Jedoch in XenForo das markup, der Eingang ist im inneren des Etiketts:

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

Sah ich in, warum dieses ist, aber nicht finden, alles, was mit benutzerdefinierten css-Checkboxen/radio-buttons, wenn das markup ist auf diese Weise. Ich möchte vermeiden, dass änderungen der markup, weil ich den Umgang mit einem forum-system hier, und das würde bedeuten, die Bearbeitung einer Reihe von Kern-Vorlagen... die müsste ich dann aktualisieren Sie die Markierung jedes mal, wenn forum software, ein update (vorausgesetzt, die Vorlagen geändert).

Ich habe versucht, erstellen Sie CSS-Regeln, die funktionieren würde, mit dieser Art von markup, aber bisher habe ich erfolglos gewesen. Ich bin nicht allzu erfahren mit CSS, nicht jeder Selektor gespeichert sind, und pseudo-Klassen sind noch ziemlich Fremd für mich, ich hatte gehofft, jemand hier könnte etwas Licht auf, wenn dies möglich sein wird, und wenn ja, wie könnte ich es angehen. Ich habe bereits meinen sprite fertig, ich muss nur Abbildung der CSS aus.

Mein Hauptproblem ist, ich kann nicht herausfinden, wie zu wählen Sie das Etikett aus (nur die labels der mit diesen inputs natürlich). In der Regel so etwas wie

input[type="checkbox"] + label

verwendet wird, aber wenn das label nicht nach dem input und stattdessen außerhalb/vor... wie kann ich die auswählen?

InformationsquelleAutor der Frage Bob Loblaw | 2012-11-09

Wenn Sie können, Bearbeiten, markup, um wickeln Sie die eigentlichen label-text, zum Beispiel:

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

Können Sie ziehen Sie einige tricks mit 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/

Beachten Sie, dass dies fehlschlagen wird, wenn der browser nicht unterstützen :checked.

Dies ist im Grunde das gleiche wie die andere Lösung, aber die stying erfolgt auf der span eher als das label.

InformationsquelleAutor der Antwort Wesley Murch

3

Leider nicht die CSS ermöglichen die Formatierung von übergeordneten Elementen basierend auf child-Elemente, die wäre einfach Weg Beispiel:
```
div.a < div { border: solid 3px red; }
```
Das Gegenteil von dem ein Kind ausgewählt, basierend auf die Eltern:
```
div.a > div { border: solid 3px red; }
```
Was Sie wollen zu tun, kann erreicht werden unter Verwendung von jQuery.

Check-out diese post.

InformationsquelleAutor der Antwort agit
1

Sehr interessante Frage. Wahrheit werden gesagt, ich bin mir ziemlich sicher, das ist einfach nicht möglich mit CSS allein.

Wenn es irgendeine Art von Muster, um das label für das Attribut (ctrl_enable_rte), es gibt Hoffnung für Sie. Zum Beispiel, wenn Sie alle Kontrollkästchen, Beschriftungen Ende mit rte könnten Sie
```
label[for$=rte] { ... }
```
Wenn es kein solches Muster, und die checkbox-IDs sind willkürlich gewählt, du musst resort in JavaScript.

InformationsquelleAutor der Antwort Madara Uchiha

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.