CSS - ¿Cómo dar estilo a una etiqueta de botones de radio seleccionados?

Quiero agregar un estilo a la etiqueta seleccionada de un botón de radio:

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?

.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, probablemente desee agregar el nameatributo en los botones de radio. De lo contrario, no forman parte del mismo grupo, y se pueden marcar varios botones de opción.

Además, como coloqué las etiquetas como hermanos (de los botones de opción), tuve que usar los atributos idy forpara asociarlos.

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

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

Eso establecerá los fondos para todos los hermanos del botón de radio seleccionado.

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

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

Tendrá que buscar JavaScript para resolver esto.

Alternativamente, reorganice su marcado:

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

Puede agregar un lapso a su html y css.

Aquí hay 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 que el botón de opción estándar desaparezca en la pantalla y superponer la imagen del botón personalizado:

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

Como actualmente no hay una solución CSS para diseñar un padre, utilizo una jQuery simple aquí para agregar una clase a una etiqueta con una entrada marcada dentro de ella.

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

No olvide dar la etiqueta de entrada previamente verificada checkedlabeltambién a la clase

Aquí hay una solución accesible

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

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