CSS no Input File

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 {<br />	      position: relative;<br />	      float: right;<br />	      top: -21px;<br />	      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;<br />	      -moz-opacity:0;<br />	      filter:alpha(opacity:0);<br />	}

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 {<br />	      width: 100%;<br />	      background: url("botao-selecione.png") no-repeat 99% 51%;<br />	      cursor: default;<br />	}

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 {<br /> background-color: #FFF;<br /> border: 1px solid #e4e4e4;<br /> letter-spacing: 1px;<br /> font-size: 11px;<br /> color: #333;<br /> padding-left: 5px;<br /> padding-top: 5px;<br /> padding-bottom: 5px;<br /> margin-left: 5px;<br /> height: 15px;<br /> vertical-align: middle;<br /> }

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" /><br /><input id="realupload" name="realupload" class="realupload" type="file" onchange="this.form.fakeupload.value = this.value;" />

Exemplo do código.