Você cria um formulário e o CSS, tudo legalzinho…. Aí chega o bendito campo FILE. Não tem jeito de aplicar CSS neste elemento, e cada navegador interpreta de uma maneira. Para arrumar isto existem vários jeitinhos na web, mas eu preferi fazer do meu para deixar o botão no padrão que eu criei.

Primeiro passo foi criar o CSS do botão

 

O form está assim por enquanto.

form1

Ao lado do campo FILE criei um BUTTON, ele será o meu campo FILE falso usando a classe que eu criei para os botões do FORM.

form2

O botão FILE verdadeiro precisa ficar sobre o falso, para deixá-lo do tamanho ideal precisei aumentar a fonte.

form3

Meu CSS está assim até agora.

 

Agora só preciso esconder o o botão verdadeiro, para isto acrescento a propriedade OPACITY com valor zero no css.

 

Pronto. O campo file padronizado está funcionando. Mas falta um toque profissional. Como o campo file está sobre o botão o hover não funciona, com jquery é fácil resolver isto. Primeiro crio uma nova classe, a “botao_hover” com os mesmos dados do hover do botão.

 

Agora crio duas funções. A primeira adiciona a classe “botao_hover” quando o mouse estiver sobre o campo FILE e a segunda retira esta classe quando o mouse não estiver sobre o campo. Agora o efeito hover do botão funciona!

form4

Ficou bom, mas para finalizar, uma outra função. Esta exibe o nome do arquivo selecionado.

Agora ficou profissa!

form5

Testado no Firefox, Chrome e Opera. No internet Explorer a propriedade opacity não funciona… Sempre o IE! Uma das soluções é colocar a mensagem abaixo.

ie_sugest

A outra é adicionar um IF.

Desta forma o botão funciona, mas sem o hover. Qualquer dúvida escreva nos comentários.