Un codigo interesante y bastante sencillo…
Solo usando HTML, CSS y un poco de jQuery personalizaremos un input file.
- Haremos la estructura html
- Usaremos CSS para ocultar para personalizar el input
- Usaremos jQuery para visualizar la ruta de donde subimos el archivo en una etiqueta <span>
Estructura html:
Hay que contener a nuestro input file de modo que luego podamos ocultarlo
CSS
Ya teniendo la estructura html pasamos a ocultar el scroll al div (overflow: hidden) que contiene al input file y colocandole “position: relative” tambien un ancho y alto definido por ustedo, dependiendo lo que quieren hacer.
al Input file se dire que sea “position: absolute;top: 0; right: 0; font-size:100px;opacity: 0;cursor: pointer” con esto haremos que el texto del input sea gigante y al absolute podremos dar click sin problemas en el recuadro de la etiqueta padre.
jQuery
Por ultimo usaremos jQuery para hacer una visualizacion de la ruta y nombre archivo en un span
Resultado Final
Puedes revisar el código completo aquí : jsfiddle