Imagen en campo de texto Formulario

[dbzsoft]

Hola como colocar una imagen en campo de texto de un formulario asi tipo msn, hotmail, etc. que la mini imagen aparezca dentro del campo.

Espero haberme hecho entender

[hades87]

si es un text area prueba con <textarea style="background:url(tuimagenaqui.jpg);"></textarea> si es un input has de poner <input type="text" style="background:url(tuimagenaqui.jpg);">

de todas formas te aconsejo que eches un ojo a css y sus grandes salidas ^^

[dbzsoft]

Hola

gracias por el aporte, pero yo no quiero que se escriba sobre la imagen, y que cuando uno coloca el cursor dentro de la caja de texto este quede a su lado y no sobre ella.

[hades87]

pues sinceramente no te acabo de entender :S

[valeguz]

Porque tiene que estar dentro del campo y no al costado? podes hacerlo pegado a donde comienza el textbox...

[dbzsoft]

lo que quiero es algo parecido a la barra de direcciones del navegador que aparece el iconito al lado de la direccion que uno escribe

[ElJavista]

Ya entendí tu problema, tienes que hacer lo siguiente:

<input class="texto" />

Y en donde pones tus estilos haces lo siguiente:

.texto {
background-image: url(imagen.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
padding-left: 25px;
}

Ahora te voy a explicar un poco los estilos. La primera linea obviamente pone el fondo al input, la segunda hace que no se repita, la tercera, posiciona la imagen de fondo a la derecha al medio (verticalmente) y la cuarta linea la da un relleno de 25 pixeles (si es un icono la imagen que vas a poner de fondo será suficiente ese relleno, sino lo aumentas o disminuyes).

Espero que te sirva.

[dbzsoft]

Hola gracias... sip asi es como queria... aunque ya lo habia hecho...

de la misma manera.

[opzina]

Holaa....yo he intentado incorporar esta imagen como lo han dicho ustedes...pero..no lo logro...

me dicen el error en el codigo:

<input type="text" input class="texto" name="nombre" size="30" class="transparente" value="Nombre" onfocus="if(this.value=='Nombre') this.value='';" onblur="if(this.value=='') this.value='Nombre';" style=" color: #000099; border: double; border-color:#0000CC" />

Gracias..salu2!

[dbzsoft]

hola compañero asi como lo tienes esta muy mal... ya que no debes colocar input class="texto" ya que esta es la llamada al css que ontiene el codigo:

.texto {
background-image: url(imagen.gif);
background-repeat: no-repeat;
background-position: 0% 50%;
padding-left: 25px;
}

puedes hacer lo siguiente:

<input type="text" name="nombre" size="30" class="transparente" value="Nombre" onfocus="if(this.value=='Nombre') this.value='';" onblur="if(this.value=='') this.value='Nombre';" style=" color: #000099; border: double; border-color:#0000CC; background-image: url(imagen.gif);background-repeat: no-repeat;padding-left: 25px;background-position: left" />

te recomiendo colocar tus stilos css en un archivo aparte...

[opzina]

Hola!!! Graciass...
Mira en dreamweaver me funcina, pero cargado en el IE8 (emulado al 7) no me funciona, solo deja el espacio como si estuviera la imagen poer la img no esta....
Es problema del IE???

SAlu2!

NOO DIJE NADAAA JEJE SOLUCIONADOOOOO, me faltaba una poner bien el directorio dnd estaba la imagen...salu2!!!

[Fabu_dina]

yo tengo un problema parecido a ver si alguien me puede ayuda solucionarlo, si escribres en el campo texto demasiado texto la imagen se mueve como podrias evitar esto

Saludos