Selector CSS para un botón de radio de la etiqueta del

Question

Es posible aplicar un css(3) a un estilo de etiqueta de un botón de radio?

Tengo el siguiente formato:

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

Lo que yo esperaba es que

label:checked { font-weight: bold; }

iba a hacer algo, pero por desgracia no (como yo esperaba).

Hay un selector que puede lograr este tipo de funcionalidad?Usted puede rodear con divs etc si que ayuda, pero la mejor solución sería la que utiliza la etiqueta atributo "for".

Cabe señalar que soy capaz de especificar los navegadores para mi aplicación, por lo que el mejor de la categoría 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 muy bien para el siguiente marcado:

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

... y funcionará para cualquier estructura, con o sin divs, etc., siempre que la etiqueta siga la entrada de radio.

Ejemplo :

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

Sé que esta es una pregunta antigua, pero si desea que el <input> sea hijo de <label> en lugar de tenerlos separados, esta es una forma pura de CSS que podría lograr:

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

Luego simplemente envuelva el texto con un <span>:

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

Véalo en JSFiddle .

Answer 3

Se me olvida donde lo vi por primera vez mencionado, pero en realidad se puede incrustar sus etiquetas en un recipiente en otro lugar mientras usted tiene la for= conjunto de atributos.Así que, vamos a ver un ejemplo en la FORMA:

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

¡Uf.Eso era mucho para una "muestra", pero creo que realmente lleva a casa el efecto y punto:ciertamente, podemos seleccionar una etiqueta para un control de entrada sin que sea un hermano.El secreto está en mantener la input etiquetas de un niño sólo lo que necesitan para ser (en este caso de la body elemento).

Desde el label elemento realidad no utilizar el :checked pseudo selector, no importa que las etiquetas se almacenan en el header.Tiene el beneficio añadido de que desde el header es un hermano elemento que podemos utilizar el ~ genérico selector de hermanos para pasar de la input[type=radio]:checked Elemento de DOM a la header contenedor y, a continuación, utilizar descendiente/selectores de hijos para acceder a la labels mismos, permite el estilo de ellos cuando sus respectivas cajas de radio/casillas de verificación está seleccionada.

No sólo podemos estilo de las etiquetas, pero también el estilo de otros contenidos que pueden ser descendientes de un hermano contenedor relativa a todas las inputs.Y ahora el momento que todos hemos estado esperando, el JSFIDDLE!Ir allí, jugar con él, hacer que funcione para usted, averiguar por qué funciona, romper, hacer lo que usted hace!

Esperemos que todo tiene sentido y totalmente responde a la pregunta y, posiblemente, cualquier medida de seguimiento de ups que pueden surgir.

Answer 4

Si su entrada es un elemento secundario de la label y usted tiene más de uno de etiquetas, se pueden combinar @Mike, el truco de la 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 }

Ver en JSFiddle.

nota:Selector de hermanos sólo funciona dentro de un mismo padre.Para evitar esto, usted puede hacer la entrada oculta en el nivel superior mediante @Nathan Blair hack.

Answer 5

Podría usar un poco de jQuery:

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

Debería asegurarse de que sus botones de opción marcados también tengan la clase correcta en la carga de la página.

Answer 6

ACTUALIZACIÓN:

Esto solo funcionó para mí porque nuestro html generado existente era una locura, generando label s junto con radio sy dándoles el atributo checked.

¡No importa, y grandes beneficios para Brilliand por mencionarlo!

Si su etiqueta es un hermano de una casilla de verificación (que suele ser el caso), puede usar el ~ selector de hermanos y un label[for=your_checkbox_id] para abordarlo ... o asignarle una identificación a la etiqueta si tiene etiquetas múltiples (como en este ejemplo donde uso etiquetas para botones)

---

Vine aquí buscando lo mismo, pero terminé encontrando mi respuesta en los docs .

se puede seleccionar un elemento <=> con el atributo <=> de esta manera:

label[checked] {
  ...
}

Sé que es una pregunta antigua, pero tal vez ayude a alguien por ahí :)