Vamos a ver de que forma podemos maquillar los feos controles de upload de los formularios sin utilizar javascript y validando xhtml.

Lo que vamos a hacer es colocar un div en lugar del input_file, y este dentro del div de la siguiente manera

1
<div class="upload"> <input type="file" name="upload" /> </div>

Aplicamos ahora una capa de maquillaje que lo deje irreconocible

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div.upload {
position: relative;
width: 80px;
height: 24px;
overflow:hidden;
background:url(btn_upload.png) left top no-repeat;
clip:rect(0px, 80px, 24px, 0px );
}

div.upload input {
position: absolute;
left: auto;
right: 0px;
top: 0px;
margin:0;
padding:0;
filter: Alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
}

Qué es lo que hemos hecho ? Simplemente hacer transparente el input_file, y mediante la propiedad css «clip» evitamos que el control se salga de los límites del div.

Y para que su aspecto sea más profesional todavía, le añadimos al div una imagen como esta

Botón upload

[ demo ] [ descargar ]