Creando un input radio personalizado con solo CSS

- Andrés Cruz

Creando un input radio personalizado con solo CSS

En esta entrada veremos cómo crear unos radios buttons como los siguientes que están publicados en la imagen promocional de esta entrada.

Para esto empleando los inputs radios tradicionales y un elemento adicional span el cual servirá como indicador para los inputs radios activos a través de reglas como la siguiente:

#input3:checked  ~ #slider{ animation-name: input3; left:40%; }

Para cada uno de los inputs radios que empleemos, que en nuestro caso serán 4; el elemento empleado como indicador será:

<span id="slider"></span>
No se emplea el indicador por defecto provisto por los navegadores, si no un elemento que es muy fácil animable mediante CSS.

Moviendo (transición) el indicador entre los inputs radios

Hay varios puntos importantes que debemos señalar; primero emplear el comportamiento por defecto de los radios activos mediante el siguiente CSS:

#input1:checked  ~ #slider{ 
  animation-name: input1; left:0; 
}
#input2:checked  ~ #slider{
  animation-name: input2; left:20%; 
}
...

Solo puede haber un radio activo a la vez en un formulario (para aquellos radios con el mismo nombre), y con el selector hermano "~" desplazamos el slider o indicador hacía encima del radio activo (checked).

Además para el slider/indicador se definen algunas propiedades como las transiciones para el desplazamiento con la propiedad left:

...
transition: 0.2s left .05s ease-in-out;

Definiendo las animaciones

Y con esto obtenemos un movimiento continuo; por último, para crear un efecto interactivo empleamos las animaciones en CSS:

@keyframes input1{ 30%, 70% { transform:scale(0.5); } }
@keyframes input2{ 30%, 70% { transform:scale(0.5); } }

Como puede ver, simplemente escalamos el indicador de para los inputs radios activos y lo movemos a la posición que le corresponda con una sencillas animaciones.

El resto del CSS es trivial y puede encontrarlo en los siguientes enlaces:

Este ejemplo fue tomado desde CSS only input radio select concept.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.