IPB

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topicStart Poll

Outline · [ Standard ] · Linear+

> Poner estilo a input file

SuNcO
post 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

Attached Image

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
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

Reply to this topicTopic OptionsStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
 

Lo-Fi Version Time is now: 22nd November 2008 - 01:29 AM