You are on page 1of 2

Personalizar los input File

Hola amigos, les traigo una manera muy muy sencilla de personalizar los input file, si bien es muy complicado hacerlo pues son componentes del sistema no hay nada que no css y html5 no se pueda hacer, despus de dar muchas vueltas con este asunto encontr una manera de adaptarlos segn tu necesidad no siendo ms aqu vamos. En el css pondremos
div.upload { width: 103px; height: 53px; background: url('../img/nuestraimagen.png') no-repeat; overflow: hidden; position:relative; top: 28px; left: 732px; } div.upload input { display: block !important; width: 142px !important; height: 44px !important; opacity: 0 !important; overflow: hidden !important; position:relative; top: 5px; left: 4px; margin-bottom: 0px; }

Esto creara una divisin con un fondo que elijamos, y dentro de esta divisin pondremos nuestro input file que ira oculto de esta manera lo que vera el usuario ser nuestro diseo pero en realidad dar click sobre el input file

En el HTML
<div class="upload"> <input type="file" name="archivo2" id="archivo2"/> </div>

No siendo ms en mi caso mi botn se ver as:

Y al dar click se abre la clsica ventana

Internamente en la pgina sucede algo as:

Gracias espero que les haya servido. Samanta Cantero. @zamdd en twitter sigue mi blog : http://titaniumsoluciones.hol.es/