seletor de CSS para a etiqueta de um botão de opção marcada

Question

É possível aplicar uma CSS (3) estilo a um rótulo de um botão de rádio verificado?

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

iria fazer algo, mas infelizmente isso não acontece (como eu esperava).

Existe um seletor que pode conseguir este tipo de funcionalidade? Você pode cercar de divs etc se isso ajuda, mas a melhor solução seria aquele que usa o rótulo '' para '' atributo.

Note-se que eu sou capaz de especificar os navegadores para a minha candidatura, de modo melhor de classe css3 etc por favor.

Answer 1

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 ele vai trabalhar para qualquer estrutura, com ou sem divs etc, desde que o rótulo segue 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>

Answer 2

Eu sei que isto é uma questão antiga, mas se você gostaria de ter o <input> ser um filho de <label> em vez de tê-los separado, aqui é uma maneira CSS puro que você pode realizá-lo:

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

Em seguida, basta quebrar o texto com uma <span>:

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

Veja-o sobre jsFiddle .

Answer 3

Eu esqueço onde eu vi pela primeira vez mencionado, mas você pode realmente incorporar suas etiquetas em um recipiente em outro lugar, desde que você tem o conjunto atributo for=. 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 era muito para um "sample" mas eu sinto que realmente leva para casa o efeito e ponto: nós certamente podemos selecionar um rótulo para um verificadas controle de entrada, sem que seja um irmão. O segredo está em manter as tags input uma criança a apenas o que eles precisam de ser. (Neste caso - apenas o elemento body)

Uma vez que o elemento label não realmente utilizar o selector :checked pseudo, não importa que as etiquetas são armazenadas no header. Ele tem a vantagem adicional de que uma vez que o header é um elemento irmão podemos usar o seletor ~ genérico irmão para mover a partir do elemento input[type=radio]:checked DOM ao recipiente header e depois usar descendentes / seletores filho para acessar os próprios labels, permitindo a capacidade de estilo-los quando suas respectivas caixas de rádio / caixas estão selecionadas .

Não só podemos denominar os rótulos, mas também estilo outros conteúdos que podem ser descendentes de um recipiente irmão em relação a todos os inputs. E agora para o momento que todos estavam esperando, o jsFiddle ! Vá lá, brincar com ele, fazê-lo funcionar para você, descobrir por que ela funciona, quebrá-lo, fazer o que você faz!

Esperamos que tudo faz sentido e respostas totalmente a questão e, possivelmente, quaisquer acompanhamentos que podem surgir.

Answer 4

Se a sua entrada é um elemento filho do label e você tem mais de um rótulos, você pode combinar @ Mike truque com 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 }

Veja-o sobre jsFiddle .

Nota: selector Irmãos só funciona dentro do mesmo pai. Para contornar esse problema, você pode fazer a entrada escondida no alto-nível usando @ Nathan Blair cortar.

Answer 5

Você poderia usar um pouco de jQuery:

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

Você precisa se certificar que seu verificados botões de rádio têm a classe correta no carregamento da página também.

Answer 6

UPDATE:

Isso só funcionou para mim porque o nosso html gerado existente era maluco, gerando labels juntamente com radios e dando-lhes tanto atributo checked.

Não importa, e grandes altos para Brilliand para trazê-lo!

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

---

Vim aqui procurando o mesmo - mas acabou encontrando a minha resposta no docs .

um elemento label com o atributo checked podem ser selecionados assim:

label[checked] {
  ...
}

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