Dando estilo a los input tipo file

Alma Fernández 29/01/2009

File Style

Por defecto, los navegadores no nos permiten definir el estilo de los campos de subida de ficheros o inputs de tipo file (input type="file").

En general no suele suponer más que una molestia sin más pero, por la dificultad de hacerlo con CSS, solemos dejarlo así sin más.

Ahora que vivimos una nueva era de interfaces web en las que se da una importancia capital al diseño es como una espinita clavada en el corazón del diseñador que, seguro, tiene en mente una forma más bonita de representar el campo o más bien el botón.

Una vez más, jQuery al rescate con un plugin que nos permitirá cambiar el botón sin demasiados quebraderos de cabeza.

Para ello, simplemente tendremos que incluir en nuestros sitios la librería jQuery y el plugin jQuery File Style.

<script src="/2009/01/29/dando-estilo-a-los-input-tipo-file/jquery.js" type="text/javascript"> </script>
<script src="/2009/01/29/dando-estilo-a-los-input-tipo-file/jquery.filestyle.js" type="text/javascript"></script>

Y añadir un código tal que el siguiente, donde definiremos la imagen que hará las veces de botón así como el tamaño del input.

$("input[type=file]").filestyle({
     image: "/2009/01/29/dando-estilo-a-los-input-tipo-file/choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
});

Los inputs modificados con este plugin mantienen la clase del input originario por lo que podremos seguir dándole estilo adicional mediante CSS.

File Style Plugin: http://www.appelsiini.net/projects/filestyle

Vía Intenta