Hola!
Tengo un archivo css donde declaro estos estilos:
Código:
.buscador{
width:100%;
height:52px;
background-image:url(../images/buscador.png);
background-color:#FFFFFF;
background-repeat:no-repeat;
position:relative;
}
.txtBusqueda input[type=text] {
width:177px;
height:12px;
margin-left:21px;
margin-top:5px;
position:relative;
top:9px;
background-color:#093;
/* background:transparent;*/
border:0px none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#696969;
text-align:left;
padding:4px;
text-indent:4px;
cursor:text;
}
.lupa {
width:25px;
height:25px;
position:relative;
background:url(../images/buscador.png);
background-position: -278px -11px;
float:right;
margin-top:-15px;
border:0px none;
cursor:pointer;
}
Y la forma en que los mando llamar desde la pagina es:
Código:
<div class="buscador">
<div class="txtBusqueda">
<input type="text" value="Buscar" />
</div>
<input type="submit" class="lupa" value="_" />
</div>
Busco aprender la mejor manera de "personalizar" los campos de texto y los botones de una página.
Mis campos se ven bien (y se comportan correctamente en IE8 y en opera).
Pero al ver la misma pagina en otros navegadores: Firefox, Safari o Chrome no puedo ingresar texto en el campo de captura "txtBusqueda" y no puedo dar clic sobre el boton "lupa".
No entiendo por que sucede, si en la misma pagina tengo otros elementos trabajados de la misma forma (son otros campos, pero pertenecen a un "login").
Si sirve como dato extra, estoy trabajando con el framework de "960" a 16 columnas...
Cualquier ayuda es apreciada!!!
Saludos!
;)
- Karen