Aplicando estilos a un input file

Para aquellos a los que les gusta personalizar hasta el más mínimo detalle en sus creaciones web, siempre ha sido una piedra en el zapato el hecho de no poder aplicar un estilo a los campos de tipo “file” en los formularios.

Hace tiempo que ya algunos han dado con soluciones parciales al problema, como por ejemplo:

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs...

Pero desde ayer, tenemos la que a mi juicio es la más completa y sencilla de ellas. Filament Group, comparte el código de uno de los ejemplos de su libro en:

http://filamentgroup.com/lab/jquery_custom_file_input_...

El sistema te permite personalizar usando CSS el aspecto completo del campo.

Y el código para hacerlo es realmente simple:

HTML:
<input id="file" name="file" type="file" />

JavaScript (jQuery):
$('#file').customFileInput();

Lo malo será que ahora ya no tendré excusas cuando los diseñadores me pidan que aplique un estilo distinto al estándar a este tipo de controles ;)
Espero que os sirva.

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

Deja un comentario

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