Como aplicar estilos a un campo html tipo "file"

Aplicar estilos a un campo de formulario de tipo "file" es uno de los mayores dolores de cabeza de los desarrolladores que trabajan en la implementación de la capa de presentación, una forma sencilla de lograrlo es usar Jquery y la librería FileStyle, esta librería nos permite una imagen personalizada para el botón "Examinar" asi como aplicar estilos al campo como si fuese de tipo texto.

La implementación es muy sencilla.

Paso 1: Incluir las librerías

<script src="jquery.js" type="text/javascript"></script> 

<script src="jquery.filestyle.js" type="text/javascript"></script>

La librería de Jquery esta disponible para descarga desdehttp://jquery.com/  y la de FileStyle desde http://www.appelsiini.net/projects/filestyle

Paso 2: Tener una imagen para el botón "Examinar"

Paso 3: Implementar la función

 $("input[type=file]").filestyle({

     image: "choose-file.gif",

     imageheight : 22,

     imagewidth : 82,

     width : 250

 });

Ya con esto deberíamos aplicar estilos con mayor libertad, fíjese como input[type=file] hace referencia a todos los campos tipo "file" sin embargo podríamos especificarlo a un campo en particular que por ejemplo tenga la calse file-upload de tal forma que usariamos input.file-upload, el archivo choose-file.gif debería estar en la misma carpeta donde se encuentra la página o sino debería definir la ruta completa de la ubicación del archivo.

Espero les sea de mucha utilidad.

Si tiene alguna inquietud o aporte, contáctenos a través de este formulario o de nuestra cuenta de Twitter @seedcolombia