Estilo en el input text de busqueda

[elcapitolio]

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"/> 

[Tecna]

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.

[elcapitolio]

Muy buena respuesta! Gracias