Estilizando Input File com CSS

Categoria: CSS em 02/07/2009 | 31 Opa :)

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).

Veja o DEMO.

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:

Veja o DEMO.

31 marcas, uhull to “Estilizando Input File com CSS”

Robson disse:

19 de abril de 2012 às 17:55

Muito bom, me ajudou muito, Obrigado Mesmo !!

Responder
Danilo disse:

16 de maio de 2012 às 12:45

Parabéns amigo, ficou show

Responder