Creando un input radio personalizado con solo CSS
23-05-2016 - Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.
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>
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.