Cmacias.com

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

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

Aplicamos ahora una capa de maquillaje que lo deje irreconocible

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

[ demo ] [ descargar ]