wake-up-neo.com

CSS-Kontrollkästchen und Optionsfelder, wenn die Eingabe innerhalb der Beschriftung ist?

Ich habe hier ausführlich nach einer Antwort darauf gesucht, bin aber nicht ganz auf das gestoßen, was ich suche. Found this CSS - Wie stelle ich eine Beschriftung für ausgewählte Radioknöpfe ein? Aber die Antwort bestand darin, das Markup zu ändern, und das möchte ich vermeiden, was ich im Folgenden erkläre.

Ich versuche, benutzerdefinierte Css3-Kontrollkästchen und Optionsfelder zu meinem XenForo-Formenthema hinzuzufügen. Alle Tutorials, die ich dazu gelesen habe, haben nach der Eingabe das Etikett:

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

In XenForos Markup befindet sich die Eingabe jedoch innerhalb des Labels:

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

Ich habe nachgeschaut, warum dies so ist, aber nichts im Zusammenhang mit benutzerdefinierten Kontrollkästchen/Optionsfeldern gefunden, wenn das Markup so ist. Ich möchte vermeiden, dass das Markup geändert werden muss, da es sich hier um ein Forum-System handelt. Dazu müssten ein paar Core-Templates bearbeitet werden, die dann jedes Mal in der Forensoftware aktualisiert werden müssen ein Update herausgeben (vorausgesetzt, die Vorlagen wurden geändert).

Ich habe versucht, CSS-Regeln zu erstellen, die mit dieser Art von Markup funktionieren würden, aber bisher war ich nicht erfolgreich. Ich bin nicht sehr erfahren mit CSS, habe nicht jeden Selector auswendig gelernt, und Pseudoklassen sind mir immer noch ziemlich fremd, daher hoffte ich, dass jemand hier etwas Licht in Frage stellen könnte, wenn dies möglich ist und wenn ja, wie ich könnte darüber gehen. Ich habe bereits mein Sprite fertig, ich muss nur das CSS herausfinden.

Mein Hauptproblem ist, dass ich nicht herausfinden kann, wie man das Label auswählt (natürlich nur die Labels, die an diesen Eingaben beteiligt sind). Normalerweise so etwas

input[type="checkbox"] + label

wird verwendet, aber wenn das Label nicht hinter der Eingabe steht und stattdessen außerhalb/davor ... wie wähle ich es aus?

30
Bob Loblaw

Wenn Sie das Markup bearbeiten können, um den eigentlichen Beschriftungstext einzuhüllen, 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>

Mit CSS können Sie einige Tricks ausführen:

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 :checked nicht unterstützt. 

Dies ist im Grunde das Gleiche wie bei der anderen Lösung, aber das Stying erfolgt auf der Spannweite und nicht auf dem Etikett.

12
Wesley Murch

Leider erlaubt CSS die Gestaltung von übergeordneten Elementen nicht, die auf untergeordneten Elementen basieren. Dies wäre der einfache Weg:

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

Das Gegenteil von der Auswahl eines Kindes basierend auf dem übergeordneten Element:

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

Was Sie tun möchten, können Sie mit jQuery erreichen.

Check out das post.

3
agit

Sehr interessante Frage. Um ehrlich zu sein, ich bin mir ziemlich sicher, dass dies mit CSS alleine nicht möglich ist.

Wenn das Label-Attribut (ctrl_enable_rte) eine Art Muster enthält, gibt es Hoffnung für Sie. Wenn beispielsweise alle Beschriftungen der Kontrollkästchen mit rte enden, können Sie verwenden

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

Wenn es kein solches Muster gibt und die Ankreuzfeld-IDs willkürlich ausgewählt werden, müssen Sie auf JavaScript zurückgreifen.

1
Madara Uchiha

IMHO ist der beste Weg, dies ohne HTML mit PURE CSS zu tun

 input[type="checkbox"] {
     position: relative;
     cursor: pointer;
     padding: 0;
     margin-right: 10px;
}
 input[type="checkbox"]:before {
     content: '';
     margin-right: 10px;
     display: inline-block;
     margin-top: -2px;
     width: 20px;
     height: 20px;
     background: #fcfcfc;
     border: 1px solid #aaa;
     border-radius: 2px;
}
 input[type="checkbox"]:hover:before {
     background: #f5821f;
}
 input[type="checkbox"]:focus:before {
     box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
 input[type="checkbox"]:checked:before {
     background: #f5821f;
     border-color: #f5821f;
}
 input[type="checkbox"]:disabled {
     color: #b8b8b8;
     cursor: auto;
}
 input[type="checkbox"]:disabled:before {
     box-shadow: none;
     background: #ddd;
}
 input[type="checkbox"]:checked:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 8px;
     background: white;
     width: 2px;
     height: 2px;
     box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
     transform: rotate(45deg);
}