CSS - ¿Cómo Diseñar una Etiqueta de Botones de Opción Seleccionada?

Quiero añadir un estilo a la 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?

 107
csshtmlcss3
Author: Nikola K., 2011-01-10
Source

4 answers

.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 atributo name en los botones de opción. De lo contrario, no forman parte del mismo grupo, y se pueden marcar varios botones de opción.

También, puesto que coloqué las etiquetas como hermanos (de los botones de opción), tuve que usar los atributos id y for para asociarlas.

 237
Author: Šime Vidas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-28 03:33:58

Si realmente desea poner las casillas de verificación dentro de la etiqueta, intente agregar una etiqueta span 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;
}

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

 20
Author: iainbeeston,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-12 15:29:12

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

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

Tendrá que buscar en JavaScript para resolver esto.

Alternativamente, reorganiza tu marcado: 

<input id="foo"><label for="foo">…</label>
 5
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-09 21:51:03

Puedes añadir un span a tu 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 superponga 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;  
}
 0
Author: Praveena Janakiraman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-15 05:39:51