Selettore CSS per selezionato il pulsante di opzione etichetta

Question

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

Ho il seguente codice:

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

Quello che speravo è che

label:checked { font-weight: bold; }

vorresti fare qualcosa, ma ahimè non è (come mi aspettavo).

C'è un selettore che consente di raggiungere questo tipo di funzionalità?Si può circondare con i div, ecc se questo aiuta, ma la soluzione migliore sarebbe quella che utilizza l'etichetta attributo "for".

Va notato che io sono in grado di specificare il browser per la mia applicazione, in modo migliore di classe css3, ecc si prega di.

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

<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 funziona per ogni struttura, con o senza tabelle, 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

So che questa è una vecchia questione, ma se si desidera avere il <input> essere un bambino di <label> invece di tenerli separati, qui è un puro CSS in modo che si possa realizzare:

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

Poi basta inserire il testo con un <span>:

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

Vedere sul JSFiddle.

Answer 3

Mi dimentico dove l'ho visto menzionato, ma si possono incorporare le etichette in un contenitore altrove, come la for= set di attributi.Quindi, diamo un'occhiata a un esempio COSÌ:

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

Wow.Che era un sacco per un "campione", ma sento che rende evidente l'effetto e punto:si può certamente selezionare un'etichetta per un ingresso controllato e senza il controllo di un fratello.Il segreto sta nell' mantenere il input i tag di un bambino per quello che hanno bisogno di essere (in questo caso solo il body elemento).

Dal momento che il label elemento che in realtà non utilizzare il :checked pseudo selettore, non importa che le etichette vengono memorizzati nel header.Non hanno il beneficio aggiunto che, poiché la header è un elemento di pari livello siamo in grado di utilizzare il ~ generico fratello selettore per passare dal input[type=radio]:checked DOM elemento header contenitore, e quindi utilizzare discendente/bambino selettori per accedere al labels se stessi, consentendo la possibilità per lo stile loro quando i loro rispettivi radio caselle caselle di controllo sono selezionate.

Non siamo solo in grado di stile di etichette, ma anche di stile altri contenuti che potrebbero essere i discendenti dei fratelli e delle sorelle contenitore relativa a tutti i inputs.E ora, per il momento che stavate tutti aspettando per il JSFIDDLE!Andare lì, giocare con lui, fare il lavoro per voi, scoprire perché funziona, rompere, fare quello che fai!

Speriamo che tutto ha un senso e risponde pienamente alle domande e, eventualmente, qualsiasi follow-up che possono sorgere.

Answer 4

Se l'input è un elemento secondario dell' label e si dispone di più etichette, è possibile combinare @Mike trucco con Flexbox + order.

html

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

css

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

Vedere sul JSFiddle.

nota:Fratello selettore funziona solo all'interno dello stesso padre.Per ovviare a questo, si può fare l'ingresso nascosto, al livello superiore utilizzando @Nathan Blair hack.

Answer 5

Si potrebbe usare un po ' di jQuery:

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

È necessario assicurarsi che il vostro bagaglio radio pulsanti hanno la classe corretta al caricamento di una pagina così.

Answer 6

AGGIORNAMENTO:

Questo lavorato solo per me, perché il nostro esistenti html generato è stato pazzesco, generando labels insieme a radios e donando loro checked attributo.

Mai mente, e big up per Brilliand per portare in su!

Se l'etichetta è un fratello di una casella di controllo (che di solito è il caso), si può utilizzare il ~ fratello di selezione, e un label[for=your_checkbox_id] rivolgersi...o dare l'etichetta di un id se si dispone di più etichette (come in questo esempio dove utilizzare le etichette per i pulsanti)

---

È venuto qui in cerca di una stessa - ma finito per trovare la mia risposta in docs.

un label elemento con checked attributo può essere selezionato in questo modo:

label[checked] {
  ...
}

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