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.
1 2 3 4 5 6 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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; } |
12 de mayo de 2008 a las 22:25