Poner estilo a input file
![]() ![]() ![]() |
Poner estilo a input file
| SuNcO |
Dec 24 2006, 02:43 AM
Post
#1
|
|
Administrador ![]() ![]() ![]() ![]() ![]() Group: Admin Posts: 624 Joined: 21-October 05 Member No.: 1 |
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 <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 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 |
![]() ![]() ![]() |
| Lo-Fi Version | Time is now: 22nd November 2008 - 01:29 AM |