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