Após uma longa pesquisa no Google, não achei nenhuma solução eficaz para customizar o input do tipo “file”, resolvi juntar alguns exemplos que peguei e fazer do meu jeito. Resumindo a ópera, eu criei um campo “text” normal, escondi o campo “file” e joguei uma imagem em cima do botão do campo ” file”, quando clicar em cima da imagem, na verdade ele vai clicar em cima do botão “Browser” do campo “file”, depois de selecionar o arquivo, ele joga o valor do campo “file” para o campo “text”. Infelizmente foi o único jeito eficiente que funcionou, é chatinho mas fica legal o efeito final.

Segue abaixo o código comentado para fazer o efeito.

CSS

Definimos a posição do campo real de upload, e colocamos ele na mesma posição do campo falso, por isso temos um top negativo.

	.realupload {
	      position: relative;
	      float: right;
	      top: -21px;
	      right: 20px;

Agora vamos esconder o campo real, na verdade o campo vai estar ali, pois precisamos clicar no botão real, mas vamos colocar a opacidade em 0, assim simulamos um hidde.

	      opacity:0;
	      -moz-opacity:0;
	      filter:alpha(opacity:0);
	}

Vamos trabalhar em cima do fakeupload agora, que é o campo falso, onde daremos a impressão de ser o campo de input file real. Aqui é simples, definimos o tamanho, o estilo do cursor e a posição da imagem que irá simular o realupload. Essa imagem ficará exatamente em cima do botão real do input file.

	.fakeupload {
	      width: 100%;
	      background: url("botao-selecione.png") no-repeat 99% 51%;
	      cursor: default;
	}

Essas configurações abaixo são da estilo do campo input, na verdade aqui cada um faz do seu jeito, mas segue o código que utilizei nos exemplos.

 input {
 background-color: #FFF;
 border: 1px solid #e4e4e4;
 letter-spacing: 1px;
 font-size: 11px;
 color: #333;
 padding-left: 5px;
 padding-top: 5px;
 padding-bottom: 5px;
 margin-left: 5px;
 height: 15px;
 vertical-align: middle;
 }

HTML

O html é simples, criamos 2 inputs, um do tipo “text” que receberá a classe do fakeupload e um do tipo “file” que terá a classe do realupload.

No campo realupload, temos um evento javascript onde ele pega o valor do campo atual e define esse valor para o campo falso, o fakeupload, assim completamos o efeito “falso”.

<input id="fakeupload" name="fakeupload" class="fakeupload" type="text" />
<input id="realupload" name="realupload" class="realupload" type="file" onchange="this.form.fakeupload.value = this.value;" />

Exemplo do código.