CSS: sostituire gli input di tipo file con immagini

Un modo cross-browser per sostituire un elemento input di tipo file con un'immagine è quello di assegnare un'immagine di sfondo al contenitore dell'input e quindi nascondere l'input con i CSS azzerando l'opacità dell'elemento. Vediamo come.

Abbiamo un semplice form di upload di file:

<form action="#" method="post" enctype="multipart/form-data">
	<div class="button">
		<input type="file" name="file" id="file" />
	</div>
</form>

Sia il contenitore che il suo discendente dovranno avere le stesse dimensioni ed essere di blocco:

div.button {
	width: 130px;
	height: 50px;
	background: url(upload.png) no-repeat;
}

#file {
	display: block;
	width: 130px;
	height: 50px;
	opacity: 0;
	filter: alpha(opacity=0);
}

La proprietà non standard filter serve ad Internet Explorer 8 ed inferiori. Potete visionare l'esempio finale in questa pagina.