El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Dando estilo a los input tipo file

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

Javascript

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Trackbacks/Pingbacks

  1. [...] Read more: Dando estilo a los input tipo file [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post es del mes pasado. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández