Cmacias.com

Vamos a aprovechar el código obtenido en maquillar un file upload, para complementarlo y que se parezca aún más si cabe a un control de upload solo que a nuestro gusto.

El código inicial cambia un poco. Necesitamos crear un contenedor, y colocar dentro nuestro nuevo botón de upload, y un input de tipo texto para que nos muestre el archivo seleccionado.

<div class="cnt_upload">
   <input id="upload_value" value="" />
   <div class="upload">
      <input type="file" name="upload" onchange="document.getElementById('upload_value').value=this.value" />
    </div>
</div>

En esta ocasión hemos tenido que utilizar javascript para poder pasar mediante el evento onchange del input de tipo file, al de tipo texto.

Ahora que tenemos la estrucura necesaria, pasamos al css

div.cnt_upload {
   position:relative;
   height: 27px;
   width: 200px;
}

div.upload {
   position: absolute;
   left: 120px;
   top: 0px;
   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;
      right: 0px;
      top: 0px;
      margin:0;
      padding:0;
      filter: Alpha(Opacity=0);
      -moz-opacity: 0;
      opacity: 0;
   }

input#upload_value {
   position:absolute;
   left: 0px;
   top: 0px;
   margin:0;
   padding:0;
   padding-top: 2px;
   height: 20px;
   width: 118px;
   border:1px solid #CCC;
}

[ demo ] [ descarga ]