Estilizando input do tipo file com css
Como prometido, mais um tutorial sobre CSS.
Não preciso citar os benefícios do CSS ou encher de linguiça aqui, vamos direto ao ponto.
Vamos criar um input do tipo file estilizado com CSS e um pouco de javascript (sem ele não há vida rsrs).
Para começar devemos preparar o HTML.
< ?xml version="1.0" encoding="ISO-8859-1" ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Estilizando input file com css</title> </head> <body> <form> <div id="div-input-file"> <input type="file" /> <div id="div-input-falso"><input name="file-falso" type="text" id="file-falso" /></div> </div> </form> </body> </html>
Bom agora vamos adicionar alguns IDS e alguns Names por ai.
< ?xml version="1.0" encoding="ISO-8859-1" ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Estilizando input file com css</title> </head> <body> <form> <div id="div-input-file"> <input name="file-original" type="file" size="30" id="file-original"/> <div id="div-input-falso"><input name="file-falso" type="text" id="file-falso" /></div> </div> </form> </body> </html>
Bom já deu para ter uma idéia de como vai ficar né? Agora falta o CSS e o Javascript básico.
No input file-original adicionamos o seguinte código javascript:
onchange="document.getElementById('file-falso').value = this.value;"
ficando assim:
<input name="file-original" type="file" size="30" id="file-original" onchange="document.getElementById('file-falso').value = this.value;"/>
Agora a mágica do CSS.
<style type="text/css">
#div-input-file{
background:url(img/file.gif) no-repeat 100% 1px;
height:28px;
width:385px;
margin:0px;
}
#div-input-file #file-original{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:18px;
}
#div-input-falso{
margin-top:-28px;
}
#div-input-falso #file-falso{
width:265px;
height:22px;
font-size:18px;
font-family: Verdana;
}
</style>
Agora é só baixar a imagem e colocar dentro da pasta img: 
Bacharel em Sistemas de Informação pela Unibrasil, trabalha com web desde 2004, atualmente trabalha na No Zebra Network como desenvolvedor Ruby. Também é Administrador do grupo de jQuery Brasil, e colaborador/idealista do site jQueryBrasil.
Show Ruan,
Eu já tinha visto como fazer isso mas era uns códigos astronômicos, só que este é bem compacto e funciona perfeitamente.
Vou usar em nossos projetos na Agência Hive.
Abrçs…
@oronaldosantos
Opa Ronaldo Valew.
Eu não testei em todos os browsers para ver se funciona, mais funcionou no FF que é o que eu uso, para mim está bom.
VLW CARA MTO UTIL e funciona direitinho
xD!!
Oie Ruan, eu fiz e ficou bem jóia, porém em alguns navegadores como Chrome e safári, não funcionou muito bem.
Mas brigada mesmo assim pela ajuda.
Abs,
Bárbara
Oie Bárbara, eu não testei no Chrome nem no Safári, só no IE e no FF. Muito obrigado pelo comentário
Oie Ruan, e conheces alguma solução para ele funcionar em todos os navegadores (IE, FF, Opera, Safari e Chrome)?
Grata
cara
eu gostaria de esconder o text também, e ao invés de mandar o caminho para um tect eu gostaria de mandar o caminhjo para uma variavel
tem como?
Para esconder o texto basta retirar a parte do onchange. Esse caminha seria para qual tipo de variavel? Js? Php? Por segurança o browser não te deixa pegar esse caminho.
Fico bem legal o botão vlw
Meu.. tu salvou a minha vida!
Entrei em uma penca de sites que tinha um monte de códigos JS e sempre dava pau em algum navegador. Esse funcionou até no IEca6!!! Tu é foda!!
Parabéns e obrigada!
Obrigado, mas eu não sou foda não =D Eu aprendi isso em algum lugar, eu não fiz mágica =D.
Muito bom o exemplo, funcionou perfeitamente, somente um detalhe, quando copiei o código e gerei os arquivos não funcionou de primeira, percebi que as 2 primeiras linhas tem um espaço:
Incorreto:
Correto:
Ruan, obrigado por compartilhar conhecimento.
Abs,
EU TE AMO MAN!!! VO TE MORDER
Não Obrigado! =D
Boa tarde,
estou trabalhando com asp.net e preciso usar runat=”server” e quando uso desconfigura tudo e para de funcionar. Já usou assim? e sabe como consertar?
Abraços
Boa tarde =D.
Não trabalho com asp.net, desculpe, só sei que runat=”server” é para que o componente seja renderizado no server ai não sei oq acontece.
Obrigada por compartilhar esse tutorial mais que sensacional!
perfeito… exatamente o que eu precisava!!
valewww, 100% funcionando!
amigo tem algum codigo para ele enviar os dados automaticamente ou seja
quando ele selecionar a imagem da um submit[o botao de enviar] sem ter o botao submit?? e enviar para a pagina onde pegarei os dados..
Vocẽ tem que colocar um handller para verificar o change do input ai no change vc coloca pra dar um submit no formulário.
para funcionar nos outros navegadores fora IE e FF. basta uns ajustes no CSS .. coisa de margins, e width do input verdadeiro . Abçs obrigado pelo código .. bastante funcional .
Bom dia Ruan,
Não consegui fazer funcionar no IE.
Funciona corretamente no FF, mais no IE não funciona, vc sabe o que devo fazer??
Bom demais cara.
Tu é fera!!
Fera é meu pai, eu sou ferinha hehe
Excelente codigo Ruan, valew por compatilhar e parabens pelo blog.
Em pleno 2012, ainda utilizo bastante hehehe
Muito legal mesmo, valeu!
Ah. Eu, particularmente, não gostei.
Se o cara desabilita o uso de script na pagina o negócio não funciona mais!
Mas vale como conhecimento, nunca tinha pensado em fazer assim.
[]‘s
Eduardo, na verdade essa é uma solução bem antiga, hoje fica mais fácil fazer com plugins do jQuery.