CSS - ¿Cómo teclear una etiqueta de botones de radio seleccionada?

Question

Quiero añadir un estilo de etiqueta seleccionada de un botón de opción:

HTML:

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked>All</label> 
<label><input type="radio" value="false">Open</label> 
<label><input type="radio" value="true">Archived</label> 
</div> 

CSS

.radio-toolbar input[type="radio"] {display:none;} 
.radio-toolbar label { 
    background:Red; 
    border:1px solid green; 
    padding:2px 10px; 
} 
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important; 
} 

Alguna idea de lo que estoy haciendo mal?

Answer 1

.radio-toolbar input[type="radio"] { 
 
    display: none; 
 
} 
 

 
.radio-toolbar label { 
 
    display: inline-block; 
 
    background-color: #ddd; 
 
    padding: 4px 11px; 
 
    font-family: Arial; 
 
    font-size: 16px; 
 
    cursor: pointer; 
 
} 
 

 
.radio-toolbar input[type="radio"]:checked+label { 
 
    background-color: #bbb; 
 
}

<div class="radio-toolbar"> 
 
    <input type="radio" id="radio1" name="radios" value="all" checked> 
 
    <label for="radio1">All</label> 
 

 
    <input type="radio" id="radio2" name="radios" value="false"> 
 
    <label for="radio2">Open</label> 
 

 
    <input type="radio" id="radio3" name="radios" value="true"> 
 
    <label for="radio3">Archived</label> 
 
</div>

En primer lugar, es probable que desee añadir el atributo name en los botones de radio. De lo contrario, no son parte del mismo grupo y se pueden verificar múltiples botones de radio.

Además, desde que coloqué las etiquetas como hermanos (de los botones de radio), tuve que usar los atributos id y for para asociarlos.

Answer 2

Está utilizando un selector de hermanos adyacente (+) cuando los elementos no son hermanos. La etiqueta es padre de la entrada, no es hermano.

CSS no tiene forma de seleccionar un elemento basado en sus descendientes (ni nada que lo siga).

Deberá tener en cuenta que JavaScript debe resolver este problema.

Alternativamente, reorganizar su margen de beneficio:

<input id="foo"><label for="foo">…</label> 

Answer 3

Si realmente desea poner las casillas de verificación dentro de la etiqueta, intente agregar una etiqueta de extensión adicional, por ej.

HTML

<div class="radio-toolbar"> 
<label><input type="radio" value="all" checked><span>All</span></label> 
<label><input type="radio" value="false"><span>Open</span></label> 
<label><input type="radio" value="true"><span>Archived</span></label> 
</div> 

CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important; 
} 

que establecerá los fondos para todos los hermanos del botón de opción seleccionado.

Answer 4

Puede agregar un lapso a su html y css.

He aquí un ejemplo de mi código ...

HTML (JSX):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/> 
<label for="radiostyle1"><span></span> am </label> 

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/> 
<label for="radiostyle2"><span></span> pm </label> 

CSS para hacer desaparecer botón de radio estándar en la pantalla y la imagen de botón personalizado superponer:

input[type="radio"] { 
    opacity:0;          
} 

input[type="radio"] + label { 
    font-size:1em; 
    text-transform: uppercase; 
    color: white ; 
    cursor: pointer; 
    margin:auto 15px auto auto;      
} 

input[type="radio"] + label span { 
    display:inline-block; 
    width:30px; 
    height:10px; 
    margin:1px 0px 0 -30px;      
    cursor:pointer; 
    border-radius: 20%; 
} 


input[type="radio"] + label span { 
    background-color: #FFFFFF 
} 


input[type="radio"]:checked + label span{ 
    background-color: #660006; 
}