Cómo hacer mejores Botones Radio sólo con HTML y CSS

En HTML existe un typo de input llamado Radio. Estos input se definen así:

<input type="radio">

Los botones de radio normalmente se presentan en grupos de radio (una colección de botones de radio que describe un conjunto de opciones relacionadas). Solo se puede seleccionar un botón de radio en un grupo al mismo tiempo.

Elegir comida

<label>Mexicana: <input type="radio" name="tipo_comida"></label>
<label>Italiana: <input type="radio" name="tipo_comida"></label>
<label>China: <input type="radio" name="tipo_comida"></label>

Resultado:

See the Pen Radio Buttons - 1 by CSS Tianguis (@css-tianguis) on CodePen.

Como podrás darte cuenta, sólo se permite elegir una opción ya que hemos nombrado al grupo tipo_comida y podremos agregar tantas opciones como deseemos.

A continuación te vamos a presentar un par de opciones para darle más vida y funcionalidad a tus botones radio.

Nota: Para estos ejemplos hemos usado como base la librería de Bootstrap sólo para darnos una base visual rápida, pero funciona perfectamente con otros frameworks o sin ellos.

Idea 1

Esta idea le da a los botones radio una apariencia similar a la que todos conocemos pero con un efecto animado que añade micro interacción a la experiencia de uso.

Para lograr este diseño así es como debes de estructurar tu HTML:

<div class="opciones-radio">
  <div class="form-group">
    <span class="opcion-radio">
      <input type="radio" id="comida_mexicana" name="tipo_comida" checked="">
      <label for="comida_mexicana">Mexicana</label>
    </span>
    
    <span class="opcion-radio">
      <input type="radio" id="comida_italiana" name="tipo_comida"><label for="comida_italiana">Italiana</label>
    </span>
    
    <span class="opcion-radio">
      <input type="radio" id="comida_china" name="tipo_comida">
      <label for="comida_china">China</label>
    </span>
    
  </div>
</div>

Esta idea se basa en un pequeño truco que consiste en ocultar el elemento radio nativo y reemplazarlo por un pseudo elemento con el que controlaremos su diseño. Para ello lo primero que tenemos que hacer con CSS es lo siguiente:

.opcion-radio input[type=radio] {
    position: absolute;
    opacity: 0;
}

Nota como hemos ocultado el elemento, ahora a continuación le indicamos cómo debe de verse el pseudo elemento:

.opcion-radio input[type=radio] + label:before {
    content: '';
    background: #F4F5F8;
    border-radius: 100%;
    border: 1px solid #a6aec6;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: -.2em;
    margin-right: .5em;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    display: inline-block;
    vertical-align: middle;
}

Con este código estámos indicando que el pseudo elemento :before de cada label dentro de .opcion-radio y que esté justo a lado del input que aunque no se vea su localización sigue siendo la misma en el HTML, deberá verse con el estilo que ahí señalamos.

Ahora nos toca indicar cómo deben de verse el botón radio seleccionado, para esto vamos a utilizar el selecto CSS :checked y deberá quedarnos algo así:

.opcion-radio input[type=radio]:checked + label:before {
    background-color: #8879FF;
    box-shadow: inset 0 0 0 4px #F4F5F8;
}

Ahora sólo agrega un par de líneas para ajustar márgenes y alineamientos y listo.

.opcion-radio label {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
}

Nuestro resultado será algo como esto:

See the Pen Radio Buttons - 2 by CSS Tianguis (@css-tianguis) on CodePen.

Nota como ademas de un mejor diseño hemos agregado un bonito efecto al momento de elegir una opción.