jQuery, desenvolvimento web, programação, PHP, Java, javascript, css, html.
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: 
Ruan Carlos é aluno da Unibrasil e está cursando o 8º Período de Sistemas de Informação, trabalha com web desde 2004, atualmente trabalha na IT7 sistemas como desenvolvedor Java. O Ruan também é Administrador do grupo de jQuery Brasil, como você pode perceber, ele adora esta biblioteca de desenvolvimento de javascript.
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