Por seguir con la temática de los formularios que comencé hace algún tiempo. Aunque los controles de formulario en HTML de los campos <input /> checkbox y radiobutton por defecto no permiten personalización existen varios efectos CSS y trucos que conseguirán cambiar dicha apariencia, permitiendo además que se vean igual en distintos navegadores manteniendo homogénea la apariencia de la web.

Soporte para IE 6, 7 y 8

Para utilizar estas técnicas necesitaremos utilizar selectores y pseudo-classes propios de CSS3, como el selector de adyacente; la pseudo-clase :checked para detectar el estado de los elementos; o pseudoelementos como :before. También la propiedad content: para inyectar contenido.

Hasta la versión 9 de Internet Explorer no hay soporte para estos elementos en CSS. Personalmente no soy de los que me gusta alimentar al diablo, por lo que no me preocupo de la compatibilidad con estas versiones dado que ni siquiera el propio fabricante (Microsoft) les da ya soporte. IE8 tiene vinculado su soporte a Windows XP y por cierto… ¡Finaliza en un mes! Desde el 8 de abril de 2014 están oficialmente obsoletos.

En cualquier caso y si por un casual tienes un cliente al que no has podido convencer de no dar soporte a estos navegadores puedes utilizar Selectivzr. Una libreria JS que dará soporte CSS3 a versiones antiguas de IE. A costa de pérdida de rendimiento claro y de vender tu alma al diablo.

Utilización de sprites e imágenes de fondo en checkboxes y radiobuttons

Todas las técnicas de personalización de los elementos de formulario checkbox y radiobutton se basan en el mismo principio: ocultar el elemento <input /> y utilizar el <label> para albergar los estilos del control de formulario, mostrando una apariencia u otra en función del estado del elemento <input /> vinculado.

Una de la técnicas que primero apareció fue la de utilizar una imagen de fondo en el <label></label>, generalmente utilizando sprites CSS para realizar un cambio de apariencia inmediato, cargando en una sola imagen todos los efectos.

Para ello necesitamos primero un código HTML con los estilos de nuestro formulario como este:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<meta charset="UTF-8" />
</head>
<body>
<form>
<input type="radio" name="option" id="radio1" checked />
<label for="radio1">Hombre</label><br />
<input type="radio" name="option" id="radio2" />
<label for="radio2">Mujer</label><br />
<input type="checkbox" name="option" id="check1" checked />
<label for="check1">DVD</label><br />
<input type="checkbox" name="option" id="check2" />
<label for="check2">CD</label>
</form>
</body>
</html>

Por supuesto las imágenes de fondo. Para ello recurriré a un conjunto de iconos bien conocido por los diseñadores: Crystal Project de Everaldo Coelho.

También tendremos que combinar dichas imágenes en una sola para crear un sprite al efecto. Para ello existen varias páginas que permiten crear imagénes combinadas en sprites como este: http://es.spritegen.website-performance.org/. La imagen resultante será similar a esta:

check-radio-sprites

 

A continuación incluiré un bloque de estilos CSS en la página que se encargue de realizar el efecto:

input[type="radio"], input[type="checkbox"] {
display: none;
}
label {
padding-left: 1.25em;
background: url('https://s3-eu-west-1.amazonaws.com/static.oscargascon.es/wp-content/media/check-radio-sprites.png') no-repeat top left;
}
input[type="radio"] + label   {
background-position: 0 -42px; width: 24px; height: 24px;
}
input[type="radio"]:checked + label {
background-position: 0 -71px; width: 24px; height: 24px;
}
input[type="checkbox"] + label {
background-position: 0 0; width: 16px; height: 16px;
}
input[type="checkbox"]:checked + label {
background-position: 0 -21px; width: 16px; height: 16px;
}

Dicho código producirá un formulario con un resultado similar a este:

form-sprite-demo1

Pulsa sobre el botón si quieres ver el código en funcionamiento.

Formulario con sprites

Ventajas

Como se puede ver tiene bastantes ventajas (y algunos inconvenientes).

  • Cambia completamente y mejora el diseño de nuestros formularios y sería fácilmente implementable en diseños ya iniciados.
  • Es mínimamente invasivo en código HTML. No hay que tocar el código y por lo tanto es fácilmente modificable.
  • Requiere muy poco CSS
  • Se pueden incluir varios colores en los iconos.

Inconvenientes

  • Es complejo y costoso de implementar a nivel gráfico dado que requiere realizar un diseño y luego convertirlo a sprites.
  • No es escalable, por lo que si queremos cambiar el tamaño tendremos que redimensionar los iconos y rehacer las imágenes.

Utilización de Webfonts para sustituir los controles de formulario

Desde que se ha comenzado a utilizar tipografías y webfonts en diseño web los diseñadores han propuesto algunas técnicas para sustituir los controles de formulario del navegador por otros personalizados.

La más extendida consiste en lugar de incluir una imagen de fondo en el <label>, inyectar mediante el pseudo-elemento :before y la propiedad CSS content: el código en hexadecimal que corresponde con el icono que queremos incluir según una tipografía cargada.

Para este ejemplo utilizaré uno de mis tipos de WebFonts favoritos: FontAwesome. Introduciremos el siguiente código HTML, muy similar al anterior con la salvedad que incluiremos un enlace a la tipografía:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<meta charset="UTF-8" />
<!-- Loading Font Awesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<form>
<input type="radio" name="option" id="radio1" checked />
<label for="radio1">Hombre</label><br />
<input type="radio" name="option" id="radio2" />
<label for="radio2">Mujer</label><br />
<input type="checkbox" name="option" id="check1" checked />
<label for="check1">DVD</label><br />
<input type="checkbox" name="option" id="check2" />
<label for="check2">CD</label>
</form>
</body>
</html>

A continuación emplearemos el siguiente código CSS. Como se puede ver muy sencillo también:

input[type="radio"], input[type="checkbox"] {
display: none;
}
label:before {
font-family: 'FontAwesome';
width: 1.25em;
display: inline-block;
}
input[type="radio"] + label:before  {
content: "f10c"; /* circle-blank */
}
input[type="radio"]:checked + label:before {
content: "f111"; /* circle */
}
input[type="checkbox"] + label:before {
content: "f096"; /* check-empty */
}
input[type="checkbox"]:checked + label:before {
content: "f046"; /* check */
}

Y obtendremos algo similar a esto:

form-sprite.demo2

 

Pulsa sobre el botón si quieres ver el código en funcionamiento.

Formulario con FontAwesome

Ventajas

Como en el caso anterior cuenta con ventajas e inconvenientes:

  • Mínimamente invasiva a nivel HTML
  • Código fácilmente modificable en CSS.
  • Se puede cambiar por cualquier otra tipografía sin tocar el código HTML.
  • Implementación muy rápida.
  • Fácil aplicación de estilos y personalización en CSS dado que es una tipografía.
  • Escalable

Inconvenientes

  • Menos espectacular a nivel gráfico. No se pueden utilizar varios colores por icono.

Utilizar todo el potencial de las tipografías

Naturalmente siempre se puede llegar un poco más lejos y CSS y cualquier Webfont (no solo FontAwesome) nos permiten multitud de efectos y alternativas.

Por ejemplo, una de las características de FontAwesome es que permite realizar «bloques» de iconos, de modo que podemos componer iconos más complejos combinando dos ya existentes. Aquí tenéis más información: Stacked Icons

Para ello tendremos que reescribir nuestro código HTML para incorporar esta nueva característica:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Título</title>
<meta charset="UTF-8" />
<!-- Loading Font Awesome -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<form>
<input type="radio" name="option" id="radio1" checked/>    
<label for="radio1">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-1x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
Hombre
</label><br />
<input type="radio" name="option" 
id="radio2" />   
<label for="radio2">
<span class="fa-stack">
<i class="fa fa-circle-o fa-stack-1x"></i>
<i class="fa fa-circle fa-stack-1x"></i>
</span>
Mujer
</label><br />
<input type="checkbox" name="option" id="check1" checked/>
<label for="check1">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-1x"></i>
<i class="fa fa-check fa-stack-1x"></i>
</span>
DVD
</label><br />
<input type="checkbox" name="option" id="check2" />
<label for="check2">
<span class="fa-stack">
<i class="fa fa-square-o fa-stack-1x"></i>
<i class="fa fa-check fa-stack-1x"></i>
</span>
CD
</label><br />
</form>
</body>
</html>

A su vez también tendremos que cambiar nuestro código CSS:

/* Hidding the radiobuttons &amp; checkboxes */
input[type="radio"], input[type="checkbox"] {
display: none;
}
/* Styling background */
label i:first-child {
color: gray;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .fa-circle,
input[type="checkbox"] + label .fa-check  {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .fa-circle,
input[type="checkbox"]:checked + label .fa-check {
display: block;
color: DarkTurquoise;
}
/* Styling checkboxes */
input[type="checkbox"]:checked + label .fa-check {
position: relative;
left: .125em;
bottom: .125em;
}
/* Styling radiobuttons */
input[type="radio"]:checked + label .fa-circle-o {
display: none;
}

De este modo obtendremos un resultado similar a este:

form-sprite.demo3

 

Pulsa sobre el botón si quieres ver el código en funcionamiento.

Formulario con estilos avanzados

Por supuesto esta solución nos abre la puerta a muchísimas más manipulaciones de los estilos CSS. Podríamos añadir animaciones y transiciones por separado para cada uno de los iconos, efectos de sombra, etc. En este ejemplo simplemente nos hemos limitado a diferenciar por colores pero por supuesto podríamos jugar muchísimo más.

Ventajas

  • Es una alternativa mucho más espectacular que las anteriores
  • Permite un sinfín de personalizaciones y efectos con CSS3: animaciones, transiciones, etc
  • Es un formato escalable y de rápida implementación.

Inconvenientes

  • Altamente invasivo a nivel HTML. Debemos incluir bastante codigo dentro del <label> para obtener el resultado.
  • De compleja reutilización. Probablemente un cambio de diseño obligue a revisar la implementación HTML de los formularios o del CSS de forma profunda.

Conclusión

Como se puede comprobar existen numerosas implementaciones a la hora de mejorar la apariencia de los formularios. Personalmente buscaría siempre una solución equilibrada que no nos comprometiera mucho trabajo en el caso de afrontar un cambio de diseño.

Naturalmente existirán otras alternativas pero yo me he limitado a estas pocas. Estaré encantado de que comentar otros métodos y alternativas que utilicéis.

Fuentes

CSS

Sprites

Imágenes de iconos

Ejemplos con FontAwesome

Comparte si te ha gustado

Autor:
Última actualización:

2 comentarios

  1. como se podría solucionar la parte invasiva del html, porque lo he implementado y cuando me desplazo hacía abajo por una pagina, los checsk pasan por encima de todo lo que existe, por ejemplo con una tabla que tengo con position:fixed; alguna sugerencia o ayuda por favor.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

De acuerdo con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril de 2016, consiento que mis datos sean tratados bajo la responsabilidad de Oscar Gascón Arjol para recibir respuesta a consultas. publicación de comentarios del blog y que las conserve mientras haya un interés mutuo para ello. Me doy por informado que tengo derecho a revocar este consentimiento en cualquier momento y a ejercer los de acceso, rectificación, portabilidad y supresión de mis datos y los de limitación y oposición al tratamiento dirigiéndome por email a [email protected] También estoy informado de que puedo reclamar ante la autoridad de control a www.agpd.es.