Foros del Web » Creando para Internet » CSS »

Estilo en el input text de busqueda

Estas en el tema de Estilo en el input text de busqueda en el foro de CSS en Foros del Web. Necesito hacer un estilo de input busqueda muy parecido a la barra buscar de esta pagina (forosdelweb)... a la barra ya le pude meter el ...
  #1 (permalink)  
Antiguo 27/05/2011, 07:57
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 6 años
Puntos: 1
Estilo en el input text de busqueda

Necesito hacer un estilo de input busqueda muy parecido a la barra buscar de esta pagina (forosdelweb)... a la barra ya le pude meter el estilo solo necesito al hacer onfocus en lugar de que chrome haga su recuadro amarillo q siempre hace que me deje meter un diseño diferente...

les paso mi codigo... Muchas gracias por la ayuda.. espero haber sido claro

Código HTML:
<style type="text/css">
<!--
#search_head{ width: 300px; height: 22px; float: left; margin: 0 0 0 5px; }
#search_head input.search{ background: transparent url(2011/search_left.png) no-repeat; border: 0; width: 260px; height: 22px; float: left; padding: 0 5px; }
#search_head input.search_button {background: transparent url(http://static.forosdelweb.com/clientscript/fdwforumhome/search_right.png) no-repeat; border: 0; width: 27px; height: 22px; display: block; text-indent: -9999px; float: left; cursor: pointer;}
-->
</style>


<input name="key" type="text" id="key" size="21" class="search"/> 
  #2 (permalink)  
Antiguo 27/05/2011, 08:51
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 4 meses
Puntos: 45
Respuesta: Estilo en el input text de busqueda

Buenas,

eso se arregla con la propiedad outline, puedes eliminarlo aunque no es muy recomendable por temas de accesibilidad sobre todo en medios audiovisuales o interactivos, o puedes cambiar sus valores, color, estilo y ancho.

Tampoco es bueno usar técnicas del estilo "text-indent: -9999px" porque en el caso de que la imagen no esté disponible pero sí el css el texto quedaría inaccesible. Por eso también es recomendable poner un color de fondo aunque se haya declarado también una imagen y poner además un color de texto suficientemente contrastado. Asi te aseguras que siempre esté visible.
  #3 (permalink)  
Antiguo 27/05/2011, 09:33
 
Fecha de Ingreso: mayo-2011
Mensajes: 167
Antigüedad: 6 años
Puntos: 1
Respuesta: Estilo en el input text de busqueda

Muy buena respuesta! Gracias

Etiquetas: estilo, input, busquedas, txt
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:55.