Maicon R. Santana
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
|
1 |
O form está assim por enquanto.
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.
O botão FILE verdadeiro precisa ficar sobre o falso, para deixá-lo do tamanho ideal precisei aumentar a fonte.
Meu CSS está assim até agora.
|
1 |
Agora só preciso esconder o o botão verdadeiro, para isto acrescento a propriedade OPACITY com valor zero no css.
|
1 |
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.
|
1 |
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!
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $("#file").mouseover(function() { $('#btn_file').addClass('botao_hover'); }); $("#file").mouseout(function() { $('#btn_file').removeClass('botao_hover'); }); }); |
Ficou bom, mas para finalizar, uma outra função. Esta exibe o nome do arquivo selecionado.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function() { $("#file").mouseover(function() { $('#btn_file').addClass('botao_hover'); }); $("#file").mouseout(function() { $('#btn_file').removeClass('botao_hover'); }); $("#file").change(function() { $('#name_file').html( $("#file").val() ); }); }); |
Agora ficou profissa!
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.
A outra é adicionar um IF.
|
1 2 3 4 5 6 7 8 9 |
<!-- [if IE]> <style type="text/css"> #file {filter: alpha(opacity=0);} </style> <![endif]--> |
Desta forma o botão funciona, mas sem o hover. Qualquer dúvida escreva nos comentários.