textarea con fondo fijo en ie

[willyfc]

buenas a todos.

tengo el siguiente problema: tengo un input text que tiene que tener una imagen con botón para buscar productos pueden verla en este vínculo

lo que pasa es que utilizando esta clase:

Código:

.buscar{
	width:115px;
	height:30px;
	border:0;
	padding:0;
	background-image:url(../imagenes/buscar.jpg);
	line-height:30px;
	text-indent:3px;
	background-repeat:no-repeat;
	float:right;
}

todo se ve bien pero al intentar escribir en text una cadena larga el fondo se desplaza en ie6,7 pero en los demás no chrome,ff,safari..etc, escriban en el text y verán el problema, ya probé utilizando background-attachment:fixed y funciona para ie pero no en los demás

me olvidaba la imagen del text es esta:



gracias de antemano..

Retiro la pregunta lo he solucionado gracias

[emiliodeg]

ponerlo por fuera no dentro del input

[Mikmoro]

Iniciado por willyfc

Retiro la pregunta lo he solucionado gracias

Deberías poner cómo, para que si alguien encuentra esta cuestión sepa cómo se soluciona.

[willyfc]

Iniciado por Mikmoro

Deberías poner cómo, para que si alguien encuentra esta cuestión sepa cómo se soluciona.

tienes razón Mikel, se me fué, aquí explicaré como lo hize:

la primera fue recurriendo a un hack para IE6,7. de la siguiente manera:

Código:

.buscar{width:115px;height:30px;background-image:url(../imagenes/buscar.jpg);background-repeat:no-repeat;	float:right;
_background-attachment:fixed;

}

Código HTML:

<input type="text" class="buscar" /> 

ahora, el hack es necesario por que el background-attachment:fixed se ve bien en ambos IE pero en los demás navegadores ya no sale la imagen pero con el hack queda bien

y si no se quiere utilizar un hack se puede utilizar un div con este mismo fondo y al input text se le quita los bordes y se pone el color de fondo transparente quedando de esta manera:

Código:

.buscar{width:115px;height:30px;background-image:url(../imagenes/buscar.jpg);background-repeat:no-repeat;	float:right;
.caja{border:0; width:110px; height:20px; float:right; text-indent:3px; margin-top:5px; background-color:transparent;}

}

Código HTML:

<div class="buscar">
	<input type="text" name="txtbuscar" value="" class="caja" />
</div> 

eso sería todo, espero que alguien le sirva.