1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer>

PDFImprimirE-mail

Estilizar formularios con Uniform/JQuery

En muchas ocasiones nos encontramos con que queremos modificar el estilo/diseño de un formulario para hacerlo más agradable al usuario.
Lo primero que haremos será intentar darle nuestro toque usando CCS. De esta forma podemos cambiar a los campos del formulario varios aspectos, color de fondo, borde, tamaño y colores del texto, etc. Desafortunadamente no hay más, es decir, no podemos estilizar a nuestro gusto los selects, checkboxes, radioboxes por ejemplo, siendo siempre iguales.

La única forma de conseguir modificar por completo los campos es mediante javascript. Yo voy a usar para este ejemplo Uniform que usa la librería JQuery.
Una vez descargado el paquete tenemos los archivos jquery.uniform.js y uniform.css. Éste último se basa en una imagen sprite, que contiene todas las imágenes empleadas para los diferentes campos (onmouseover, onmousedown, etc).
Dependiendo del tipo de campo carga una parte de la imagen u otra.
Este es el SPRITE que trae el estilo por defecto de uniform. 

Para usar nuestro script debemos como no enlazar el .js y el .css

{code lang:html4strict title:"Insertar en el head" lines:false hidden:false}<script src="/jquery.uniform.js" type="text/javascript"></script>
<link rel="stylesheet" href="/uniform.css" type="text/css" media="screen" charset="utf-8" />
{/code}Y con la siguiente sentencia ya estaremos estilizando los campos de nuestro formulario 

{code lang:html4strict title:"También en el head" lines:false hidden:false}<script type="text/javascript">
(function($) {  
   $(function() {
       $("select, textarea, input, radio").uniform();    
   });
})(jQuery); 
</script> {/code}
Esta podría ser una configuración básica, para saber más sobre los diferentes parámetros debéis leer la documentación.

Podéis ver el ejemplo en funcionamiento AQUÍ.   

De esta forma, podéis cambiar totalmente el estilo de vuestros formularios, especialmente de los selects, checkboxes, radioboxes y los inputs file.
En la web de uniform existen 2 temas adicionales, cada uno con sus respectivos sprites.
Podéis ver como quedarían AQUÍ (Sprite) y AQUÍ (Sprite), aunque no están tan perfeccionados como el que viene por defecto.

Por tanto, lo único que deberás hacer para tener un formulario totalmente personalizado, es crear tu propio sprite con su hoja de estilos adecuada para ajustar cada imagen del sprite a cada tipo de campo.
Puedes empezar por elegir uno de los sprites ya realizados e ir modificándolo a tu gusto para no tener que empezar de cero.