Hace ya un tiempo que los search inputs al estilo Safari se están poniendo de moda. Algo fácil si quieres conseguirlo en Safari, más complicado si lo haces en otro navegador y un trabajo bastante duro si quieres combinar las dos anteriores -no tanto si ya tienes todo el código claro.

Como podéis ver yo lo he conseguido en este blog y os lo voy a explicar a continuación para que veáis que no es nada difícil.

<li id="applesearch">
  <span class="sbox_l"></span>
  <form class="sbox" method="get" action="<?php bloginfo('url') ?>/">
    <input type="search" name="s" id="s" value="Buscar"
onfocus="if (this.value == 'Buscar') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Buscar';}" autosave="applestyle_srch"
results="5" onkeyup="applesearch.onChange('s','srch_clear')" />
  </form>
  <span class="sbox_r" id="srch_clear"></span>
</li>

Con este HTML tendréis suficiente para que se vea correctamente en Safari, tened en cuenta que está hecho para Wordpress así que deberéis cambiar algunas cosas para que funcione fuera de el.

Si quieres conseguir un aspecto parecido, con funcionalidades similares deberás hacer lo que explico a continuación:

Seguir leyendo… »