Printable Version of Topic

Posted by: SuNcO Dec 24 2006, 02:43 AM

Con este sencillo tutorial aprenderemos un truco muy sencillo de como hacer que un <input type=file.. no muestre el feo boton "Examinar.." sino cualquier cosa que nosotros quieramos



Las lineas de rojo son las explicaciones

Crear 2 estilos
<style type="text/css">
Este primero como se ve, tiene entre otras cosas z-index = 0 lo que indica que este objeto se va a poner debajo de otro
div.falso { position: absolute; top: -2px; left: 0px; z-index: 0; }
Lo interesante de este otro es que tiene una propiedad llamada opacity, lo que quiere decir que hace el objeto transparente. En este caso todos los <input type=file...
input.file { position: relative; filter:alpha(opacity: 0); opacity: 0; z-index: 1; }
Hay 2 opacity, el segundo es para que funcione en Firefox
</style>

Ejemplo para ocultar un &lt;input type=file...

<br><br>

Ponemos un <input type=file.. normal para ver luego la diferencia
Normal : <input type="file" size="25">

<br><br>

Creamos un DIV que es el que va a contener todo
<div style="position:relative">
Estos espacios en blanco son para que el <input type=file.. se haga mas a la derecha (se puede arreglar con las coordenadas left y eso pero en Firefox fallan, asi que por ahora asi lo dejamos
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Al siguiente input le indicamos que al elegir un archivo, este se pase al siguiente input (que es un input normal, no type=file)
<input type="file" class="file" size="25" onChange="document.all('el_archivo_falso').value = this.value">
<div class="falso">
Con truco : <input type="text" name="el_archivo_falso" size="25"> <img src="boton.jpg" align="absmiddle">
</div>
</div>

El truco consiste en que ponemos el <input type=file.. encima de la imagen boton.jpg pero le aplicamos transparencia. Si por ejemplo a la transparencia (que se hace con opacity) le damos 40, veremos que el otro input sigue ahi pero no se mira, asi cuando damos click al supuesto boton que pusimos es como si presionaramos el verdadero boton

En boton.jpg puedes ponr la imagen que quieras. Al input normalito tambien le puedes poner algun estilo extra