forms - para - radio button html ejemplo

Selector de CSS para la etiqueta de un botón de opción marcado

Question

¿Es posible aplicar un estilo css (3) a la etiqueta de un botón de opción marcado?

Tengo el siguiente marcado:

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

Lo que esperaba es que

label:checked { font-weight: bold; }

haría algo, pero por desgracia no lo hace (como esperaba).

¿Hay un selector que pueda lograr este tipo de funcionalidad? Puede rodear con divs, etc., si eso ayuda, pero la mejor solución sería aquella que utiliza la etiqueta '''' para '''' atributo.

Cabe señalar que puedo especificar navegadores para mi aplicación, así que mejor de la clase css3, etc., por favor.

Answer 1

ACTUALIZAR:

Esto solo funcionó para mí porque nuestro html generado era alocado, generando label junto con las radio y dándoles ambos atributos checked .

¡No importa, y grandes ventajas para Brilliand por sacarlo a relucir!

Si su etiqueta es un hermano de una casilla de verificación (que generalmente es el caso), puede usar el ~ selector de hermanos, y una label[for=your_checkbox_id] para abordarlo ... o darle una identificación a la etiqueta si tiene varias etiquetas (como en este example donde utilizo etiquetas para botones)

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

un elemento de label con atributo checked se puede seleccionar así:

label[checked] {
  ...
}

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

Answer 2

Olvidé dónde lo mencioné por primera vez, pero en realidad puede insertar sus etiquetas en un contenedor en otro lugar siempre que tenga el conjunto de atributos for= . Entonces, veamos una muestra en 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>

Uf. Eso fue mucho para una "muestra", pero siento que realmente lleva a casa el efecto y el punto: ciertamente podemos seleccionar una etiqueta para un control de entrada controlado sin que sea un hermano. El secreto radica en mantener las etiquetas de input como secundarias solo para lo que necesitan ser (en este caso, solo el elemento de body ) .

Como el elemento label no utiliza realmente el pseudo selector :checked , no importa que las etiquetas se almacenen en el header . Tiene el beneficio adicional de que, dado que el header es un elemento hermano, podemos usar el ~ selector genérico de hermanos para movernos de la input[type=radio]:checked elemento DOM en el contenedor del header y luego usamos selectores descendentes / secundarios para acceder al label s ellos mismos, lo que permite la capacidad de estilo cuando se seleccionan sus respectivas cajas de radio / casillas de verificación .

No solo podemos diseñar las etiquetas, sino también diseñar otro contenido que pueda ser descendiente de un contenedor hermano en relación con todas las input . Y ahora, por el momento que todos han estado esperando, ¡ JSFIDDLE ! Ve allí, juega con él, haz que funcione para ti, descubre por qué funciona, divídelo, ¡haz lo que haces!

Esperemos que todo tenga sentido y responda completamente la pregunta y posiblemente cualquier seguimiento que pueda surgir.

Answer 3

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 radio marcados también tengan la clase correcta en la carga de la página.

Answer 4

Sé que esta es una vieja pregunta, pero si desea que <input> sea ​​un elemento secundario de <label> lugar de tenerlos separados, aquí hay una forma pura de CSS que podría lograr:

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

Luego simplemente envuelve el texto con un <span> :

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

JSFiddle en JSFiddle .

Answer 5

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