Programando o Intentándolo

Como modificar el estilo de un input file (Versión mejorada)

Hace poco más de un mes me estaba buscando como modificar el estilo de un input file y encontre varias cosas y entre todas, propuse mi solución. Pero hace unos dias mientras estaba completando la galería de imagenes que posteé tampoco hace no mucho tiempo, intente modificar un poco más el input file y me di cuenta de que habia usado una forma bastante retorcida y desde luego no era la mejor.

Asique aquí pongo la solución final (de momento jejeje) para modificar un input file con 5 lineas de HTML, otras 5 lineas de JavaScript y una hoja de estilo.

El codigo HTML es similar a la anterior versión:

Es muy sencillo, en la linea 2 colocamos el campo en el que se mostrará el archivo seleccionado y en la linea siguiente hay una division que contiene el botón y el input file oculto porque no se puede modificar directamente.

La función JavaScript (bueno JQuery) es totalmente trivial copia el contenido del input oculto en el que se muestra cada vez que se modifica.

La función es la que usaré para modificar los input para subir imagenes a la galería, que se crean de forma dinamica por lo que hay que ir ejecutando la función cada vez que se crea un input, pero si no vas a estar en este caso puedes crear un bucle para no llamar a la función tontamente.

Y para terminar el CSS para modificar el estilo:

Como siempre el código completo lo puedes descargar aquí.

Y aquí también puedes ver el código completo, realizar las modificaciones que quieras y ver el resultado.