Selettore CSS per un'etichetta del pulsante di opzione selezionata

Question

È possibile applicare uno stile css (3) a un'etichetta di un pulsante di opzione selezionato?

Ho il seguente markup:

<input type="radio" id="rad" name="radio"/> 
<label for="rad">A Label</label> 

quello che speravo è che

label:checked { font-weight: bold; } 

avrebbe fatto qualcosa, ma purtroppo non è così (come mi aspettavo).

C'è un selettore in grado di raggiungere questo tipo di funzionalità? Si può circondare con div ecc se questo aiuta, ma la soluzione migliore sarebbe quella che usa l'attributo label '' for ''.

Va notato che sono in grado di specificare i browser per la mia applicazione, quindi la migliore classe css3 ecc. Per favore.

Answer 1

input[type="radio"]:checked+label{ font-weight: bold; } 
//a label that immediately follows an input of type radio that is checked 

funziona molto bene per il seguente markup:

<input id="rad1" type="radio" name="rad"><label for="rad1">Radio 1</label> 
<input id="rad2" type="radio" name="rad"><label for="rad2">Radio 2</label> 

... e funzionerà per qualsiasi struttura, con o senza div ecc purché l'etichetta segue l'ingresso radio.

Esempio:

input[type="radio"]:checked+label { font-weight: bold; }

<input id="rad1" type="radio" name="rad"><label for="rad1">Radio 1</label> 
 
<input id="rad2" type="radio" name="rad"><label for="rad2">Radio 2</label>

Answer 2

Si potrebbe usare un po 'di jQuery:

$('input:radio').click(function(){ 
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS 
}); 

avresti bisogno di assicurarsi che i pulsanti radio controllato hanno la corretta anche la classe sul caricamento della pagina.

Answer 3

So che questa è una vecchia questione, ma se si desidera avere la <input> essere un figlio di <label> invece di averli separati, ecco un modo CSS puro che si potrebbe realizzarlo:

:checked + span { font-weight: bold; } 

Poi basta avvolgere il testo con un <span>:

<label> 
    <input type="radio" name="test" /> 
    <span>Radio number one</span> 
</label> 

vedi sul JSFiddle.

Answer 4

UPDATE:

Questo ha funzionato solo per me, perché il nostro HTML generato esistente era stravagante, generando label s con radio s e dando loro entrambi attributo checked.

Non importa, e big up per Brilliand per averlo tirato su!

Se l'etichetta è un fratello di una casella di controllo (che di solito è il caso), è possibile utilizzare il selettore di pari livello ~ e un label[for=your_checkbox_id] per risolverlo ...o dare l'etichetta di un id, se si dispone di più etichette (come in questo example dove io uso le etichette per i pulsanti)

---

venuti qui cercando la stessa -, ma abbiamo finito per trovare la mia risposta nel docs.

un elemento label con l'attributo checked può essere selezionata in questo modo:

label[checked] { 
    ... 
} 

Lo so che è una vecchia questione, ma forse aiuta qualcuno là fuori :)

Answer 5

mi dimentico dove ho visto la prima volta menzionato ma è possibile incorporare le etichette in un contenitore altrove purché si disponga del set di attributi for=. Quindi, diamo un'occhiata un campione su SO:

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #262626; 
 
    color: white; 
 
} 
 

 
.radio-button { 
 
    display: none; 
 
} 
 

 
#filter { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.filter-label { 
 
    display: inline-block; 
 
    border: 4px solid green; 
 
    padding: 10px 20px; 
 
    font-size: 1.4em; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
main { 
 
    clear: left; 
 
} 
 

 
.content { 
 
    padding: 3% 10%; 
 
    display: none; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
} 
 

 
.date { 
 
    padding: 5px 30px; 
 
    font-style: italic; 
 
} 
 

 
.filter-label:hover { 
 
    background-color: #505050; 
 
} 
 

 
#featured-radio:checked~#filter .featured, 
 
#personal-radio:checked~#filter .personal, 
 
#tech-radio:checked~#filter .tech { 
 
    background-color: green; 
 
} 
 

 
#featured-radio:checked~main .featured { 
 
    display: block; 
 
} 
 

 
#personal-radio:checked~main .personal { 
 
    display: block; 
 
} 
 

 
#tech-radio:checked~main .tech { 
 
    display: block; 
 
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked"> 
 
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal"> 
 
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech"> 
 

 
<header id="filter"> 
 
    <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label> 
 
    <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label> 
 
    <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label> 
 
</header> 
 

 
<main> 
 
    <article class="content featured tech"> 
 
    <header> 
 
     <h1>Cool Stuff</h1> 
 
     <h3 class="date">Today</h3> 
 
    </header> 
 

 
    <p> 
 
     I'm showing cool stuff in this article! 
 
    </p> 
 
    </article> 
 

 
    <article class="content personal"> 
 
    <header> 
 
     <h1>Not As Cool</h1> 
 
     <h3 class="date">Tuesday</h3> 
 
    </header> 
 

 
    <p> 
 
     This stuff isn't nearly as cool for some reason :(; 
 
    </p> 
 
    </article> 
 

 
    <article class="content tech"> 
 
    <header> 
 
     <h1>Cool Tech Article</h1> 
 
     <h3 class="date">Last Monday</h3> 
 
    </header> 
 

 
    <p> 
 
     This article has awesome stuff all over it! 
 
    </p> 
 
    </article> 
 

 
    <article class="content featured personal"> 
 
    <header> 
 
     <h1>Cool Personal Article</h1> 
 
     <h3 class="date">Two Fridays Ago</h3> 
 
    </header> 
 

 
    <p> 
 
     This article talks about how I got a job at a cool startup because I rock! 
 
    </p> 
 
    </article> 
 
</main>

Accidenti. Questo è stato molto per un "campione", ma ritengo che dia davvero un senso all'effetto e al punto: possiamo certamente selezionare un'etichetta per un controllo di input controllato senza che sia un fratello. Il segreto sta nel mantenendo i tag input un bambino solo per quello che devono essere (in questo caso - solo l'elemento body).

Poiché l'elemento label non utilizza effettivamente lo pseudo-selettore :checked, non importa se le etichette sono memorizzate nello header. Ha il vantaggio aggiuntivo che dal momento che il header è un elemento di pari livello, è possibile utilizzare il selettore di fratello genericoper spostarsi dall'elemento input[type=radio]:checked DOM al contenitore header e quindi utilizzare selettori discendenti/figlio per accedere agli stessi label s, consentendo possibilità di modificarli quando vengono selezionate le rispettive caselle radio/caselle di controllo.

Non solo possiamo modellare le etichette, ma anche stilare altri contenuti che possono essere i discendenti di un contenitore di pari livello rispetto a tutti gli input s. E ora per il momento che stavate aspettando, lo JSFIDDLE! Vai là, giocaci, falla funzionare per te, scopri perché funziona, rompila, fai quello che fai!

Speriamo che tutto abbia un senso e risponda pienamente alla domanda e possibilmente a eventuali follow-up che potrebbero emergere.