Caselle di controllo CSS e pulsanti di opzione quando l'input è all'interno dell'etichetta?

Question

Ho cercato a lungo qui per una risposta a questo, ma non ho ancora capito cosa sto cercando. Trovato questo CSS - How to Style a Selected Radio Buttons Label? ma la risposta ha comportato la modifica del markup, e questo è qualcosa che voglio evitare che spiegherò di seguito.

Sto cercando di aggiungere caselle di controllo CSS3 personalizzate e pulsanti di opzione per il mio tema XenForo forum, e tutti i tutorial che ho letto su questo avere sull'etichetta dopo l'ingresso:

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

Tuttavia nel markup di XenForo l'ingresso è all'interno dell'etichetta:

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

ho guardato in perché questo è, ma non ha trovato nulla correlate a caselle di controllo pulsanti css personalizzato/radio quando il markup è in questo modo. Voglio evitare di dover cambiare il markup, perché ho a che fare con un sistema di forum qui, e ciò implicherebbe la modifica di una serie di template core ... che dovrei quindi aggiornare il markup ogni volta che il software del forum mettere un aggiornamento (presumendo che i modelli siano cambiati).

Ho provato a creare regole CSS che funzionerebbero con questo tipo di markup, ma finora non ho avuto successo. Non ho molta esperienza con i CSS, non ho memorizzato tutti i selettori e le pseudo classi sono ancora abbastanza estranee a me, quindi speravo che qualcuno qui potesse chiarire se ciò fosse possibile, e se sì, come potrebbe andare su di esso. Ho già il mio sprite pronto per andare, ho solo bisogno di capire il CSS.

Il mio problema principale è che non riesco a capire come selezionare l'etichetta (solo le etichette coinvolte con questi ingressi ovviamente). Di solito è usato qualcosa come

input[type="checkbox"] + label 

, ma quando l'etichetta non è dopo l'ingresso e invece al di fuori/prima che ... come faccio a selezionarlo?

Answer 1

Purtroppo CSS non consente lo stile degli elementi padre sulla base di elementi figlio che sarebbe il semplice esempio così:

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

L'opposto di selezione di un bambino sulla base di genitore:

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

È possibile ottenere ciò che si desidera fare utilizzando jQuery.

Check out this post.

Answer 2

Domanda molto interessante. A dire il vero, sono abbastanza sicuro che non è possibile solo con i CSS.

Se è presente una sorta di motivo per l'attributo dell'etichetta per (ctrl_enable_rte), c'è speranza per voi. Per esempio, se tutte le etichette casella di controllo terminano con rte, si potrebbe usare

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

Se non c'è tale modello, e gli ID casella di controllo sono scelti arbitrariamente, si dovrà ricorrere a JavaScript.

Answer 3

Se è possibile modificare il markup per avvolgere il testo vero e proprio marchio, ad esempio:

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

si può tirare fuori alcuni trucchi con i 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/

Tieni presente che ciò non riuscirà se il browser non supporta :checked.

Questo è praticamente uguale all'altra soluzione, ma lo stying viene eseguito sullo span piuttosto che sull'etichetta.