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:
<input id="identificador_input" class="css-checkbox" type="radio" value="1" name="nombre_del_grupo">
<label class="css-label" for="identificador_input">
Etiqueta1
</label>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:
input[type=radio].css-checkbox{
display: none;
}
input[type=radio].css-checkbox + label.css-label{
padding-left: 27px;
height: 18px;
display: inline-block;
line-height: 18px;
background-repeat: no-repeat;
background-position: 0 0;
vertical-align: middle;
cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label{
background-position: 0 -18px;
}
label.css-label{
background-image: url(cssradiobutton.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}Y ya está. El resultado no podría tener mejor pinta:
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.
/* For Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
label.css-label{
background-image: url(cssradiobutton@2x.png);
background-size: 18px 36px;
}
}Fuente: descargar fuentes
¡Qué bueno, justo lo que estaba buscando!
Muchas gracias por tu comentario Ramón. Cualquier otra cosa que necesites, aquí nos tienes.
Excelente información, fácil, breve y acertado, gracias….
Estamos muy contentos porque te haya servido, Víctor. ¡Echa un ojo a la página, igual encuentras alguna otra cosa interesante!