Seletor CSS para o rótulo de um botão de opção marcado

É possível aplicar um estilo css (3) a um rótulo de um botão de opção marcado?

Eu tenho a seguinte marcação:

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

O que eu estava esperando é que

label:checked { font-weight: bold; }

faria algo, mas infelizmente não faz (como eu esperava).

Existe um seletor que pode atingir esse tipo de funcionalidade? Você pode cercar divs, etc., se isso ajudar, mas a melhor solução seria aquela que usa o atributo label '' for ''.

Note-se que eu sou capaz de especificar navegadores para o meu aplicativo, então o melhor da classe css3 etc, por favor.

tente o +símbolo: É um combinador de irmãos adjacentes. Combina duas seqüências de seletores simples com o mesmo pai e a segunda deve vir IMEDIATAMENTE após a primeira.

Assim sendo:

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

funciona muito bem para a seguinte marcação:

<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 funcionará para qualquer estrutura, com ou sem divs, etc, desde que o rótulo siga a entrada de rádio.

Exemplo:

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>

Sei que essa é uma pergunta antiga, mas se você gostaria de ter <input>filhos em <label>vez de separá-los, aqui está uma maneira pura de CSS que você pode fazer:

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

Em seguida, envolva o texto com um <span>:

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

Veja no JSFiddle .

Eu esqueço onde vi pela primeira vez mencionado, mas é possível incorporar seus rótulos em um contêiner em outro lugar, desde que você tenha o for=conjunto de atributos. Então, vamos verificar uma amostra no 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>

Ufa. Isso foi demais para uma "amostra", mas eu sinto que realmente leva a efeito e ponto: certamente podemos selecionar um rótulo para um controle de entrada verificado sem que seja um irmão. O segredo está em manter as inputtags de uma criança apenas no que elas precisam ser (neste caso - apenas no bodyelemento) .

Como o labelelemento não utiliza o :checkedpseudo-seletor, não importa que os rótulos estejam armazenados no header. Ele tem o benefício adicional de que, como headeré um elemento irmão, podemos usar o ~seletor genérico de irmão para mover do input[type=radio]:checkedelemento DOM para o headercontêiner e, em seguida, usar seletores descendentes / filhos para acessar os labelpróprios, permitindo a capacidade de estilizá-los quando seus as respectivas caixas de seleção / rádio estão marcadas .

Não apenas podemos estilizar os rótulos, mas também estilizar outro conteúdo que possa ser descendente de um contêiner irmão em relação a todos os inputs. E agora, no momento em que todos esperavam, o JSFIDDLE ! Vá lá, brinque com ele, faça funcionar para você, descubra por que funciona, quebre, faça o que você faz!

Espero que tudo faça sentido e responda totalmente à pergunta e, possivelmente, qualquer acompanhamento que possa surgir.

Se sua entrada for um elemento filho do label e você tiver mais de um rótulo, poderá combinar o truque de @ Mike com Flexbox+ order.

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

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 }

Veja no JSFiddle .

Nota: O seletor de irmãos funciona apenas no mesmo pai. Para contornar isso, você pode ocultar a entrada no nível superior usando o @Nathan Blair hack.

Você poderia usar um pouco de jQuery:

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

Você precisaria garantir que os botões de opção marcados também tenham a classe correta no carregamento da página.

ATUALIZAR:

Isso só funcionou para mim porque nosso html gerado existente era maluco, gerando labels junto com radios e fornecendo a amboschecked atributo.

Não importa, e grandes ups para Brilliand por trazê-lo à tona!

Se seu rótulo é um irmão de uma caixa de seleção (que geralmente é o caso), você pode usar o ~seletor de irmãos e um label[for=your_checkbox_id]para endereçá-lo ... ou atribuir um ID ao rótulo se você tiver vários rótulos (como neste exemplo, onde eu use etiquetas para botões)

Vim aqui procurando o mesmo - mas acabei encontrando minha resposta nos documentos .

um labelelemento com checkedatributo pode ser selecionado da seguinte forma:

label[checked] {
  ...
}

Eu sei que é uma pergunta antiga, mas talvez ajude alguém lá fora :)