Radio button con estilo CSS3

Se puede dar estilo a casi cualquier componente en HTML. Son muy pocos los que admiten pocas reglas de CSS, y aunque alguien pueda pensar que los radio buttons tienen pocos atributos variables, lo cierto es que puedes tener un Radio button con estilo CSS3 siguiendo estos pasos. ¡Adelante!

Lo único que necesitas para lograr tener un Radio button con estilo CSS3 es: un par de imágenes, algunas líneas en tu fichero de estilos.css y una forma especial de colocar el input. Veamos cómo.

El primer paso es colocar el input con un label de la siguiente forma:

Es importante que el identificador del input esté colocado como valor del atributo for para el label.

El segundo paso es añadir a tu fichero de estilos las siguientes clases:

Y ya está. El resultado no podría tener mejor pinta:

Radio button con estilo CSS3. Ejemplo

Para rematar la faena, tan solo quedaría añadir un par de líneas al fichero de estilos para cuando veamos los radio button en pantalla retina o dispositivos móviles.

Radio button con estilo CSS3 para retina

Copia y pega estas líneas en tu fichero .css y listo. Asegúrate de tener una imagen que sea justo el doble de tamaño que la original utilizada anteriormente. Con el sufijo @2x, para seguir el estándar.

Fuente: descargar fuentes

2 comentarios

Deja un comentario

No te preocupes por tu email, no será publicado.