Selector de CSS para una etiqueta de botón de opción marcada

Question

¿Es posible aplicar un estilo css (3) a una 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 es así (como yo 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.

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 y cuando la etiqueta sigue a 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

Se puede usar un poco de jQuery:

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

que había necesidad de asegurarse de que sus botones de radio controladas tienen la correcta clase en la carga de la página también.

Answer 3

Sé que esto es una vieja pregunta, pero si le gustaría tener el <input> ser un hijo de <label> en lugar de tener separados, aquí hay una manera CSS puro que podría lograrlo:

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

a continuación, sólo ajustar el texto con una <span>:

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

verlo en JSFiddle.

Answer 4

ACTUALIZACIÓN:

Esto sólo trabajó para mí, porque nuestros actuales html generado era loco, generando label s junto con radio s y darles tanto atributo 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 por lo general es el caso), puede utilizar el ~ selector de hermanos, y un label[for=your_checkbox_id] para abordarlo ...o dar la etiqueta un identificador si tiene varias etiquetas (como en este example donde utilizo las etiquetas para los botones)

---

Vine aquí en busca de la misma - pero terminamos encontrar mi respuesta en el docs.

un elemento label con checked atributo se puede seleccionar este modo:

label[checked] { 
    ... 
} 

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

Answer 5

me olvido de donde vi por primera vez mencionado, pero en realidad puede insertar sus etiquetas en un contenedor en otro lugar siempre que tenga el conjunto de atributos for=. Por lo tanto, vamos a ver una muestra de 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 se encuentra en y mantiene las etiquetas input como secundarias solo para lo que deben ser (en este caso, solo el elemento body) .

Dado que 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 hermano genérico ~ para pasar del elemento DOM input[type=radio]:checked al contenedor header y luego usar los selectores descendentes/secundarios para acceder a los label s, s, lo que permite capacidad de diseñarlos cuando se seleccionan sus respectivas casillas de radio/casillas de verificación.

No solo podemos cambiar el estilo de las etiquetas, sino también el estilo de otros contenidos que pueden ser descendientes de un contenedor hermano en relación con todos los input s. Y ahora, por el momento que todos han estado esperando, ¡el JSFIDDLE! Ve allí, juega con él, haz que funcione para ti, descubre por qué funciona, divídelo, ¡haz lo que haces!

Afortunadamente, todo tiene sentido y responde completamente la pregunta y posiblemente cualquier seguimiento que pueda surgir.