JMiur [E]

Un artículo de speckyboy nos enseña a crear una caja de búsqueda con estilo; bueno, todas tiene estilo pero esta tiene ESTILO.

Como es un elemento muy común y que se usa en casi cualquier sitio, vamos a ver la manera de realizarla ya que podríamos emplearla incluso en Blogger aunque, claro está, como la mayoría de las cosas que usan CSS3 y HTML5, en las viejas versiones de Internet Explorer funcionará de modo parcial, mejor dicho, funcionará bien pero no se verán ciertos efectos.

Primero que nada, el HTML básico es algo así:
<form class="formulariodemo cf">
  <input type="text" placeholder="ingresar texto ..." required>
  <button type="submit">buscar</button>
</form>
El formulario es simple y podría tener más parámetros; la primera etiqueta INPUT usa los atributos placeholder y required que son optativos y el botón de envio, en lugar de estar en otra etiqueta INPUT, se encuentra en una etiqueta BUTTON; obviamente, a la etiqueta FORM se le deberán agregar los atributos extras que necesite según sea el sitio donde se agregue. Un ejemplo:
<form class="formulariodemo cf" action='http://nombre.blogspot.com/search' method='get'>
  <input type="text" placeholder="ingresar texto ..." required name="q" >
  <button type="submit">buscar</button>
</form>
Y ahora, el largo, largo, largo CSS:
<style>

  .cf:before, .cf:after {
    content:"";
    display:table;
  }
  .cf:after {clear:both; }
  .cf { zoom:1; }

   /* el formulario en si mismo */
  .formulariodemo {
    background-color: #303941;
    border-radius: 10px;
    box-shadow: 0 0 2px #606971 inset;
    margin: 0 auto;
    padding: 15px;
    width: 450px;
  }

   /* la caja donde se ingresa el texto a buscar */
  .formulariodemo input {
    background-color: #EEE;
    border: none;
    border-radius: 3px 0 0 3px;
    float: left;
    font-family: Tahoma;font-size:15px;font-weight: bold;
    height: 20px;
    padding: 10px 5px;
    width: 330px;
  }
  .formulariodemo input:focus {
    outline: 0;
    background: #FFF;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
  }

  /* el estilo de del atributo placeholder debe ser declarado para cada navegador de modo separado */
  .formulariodemo input:-moz-placeholder { color: #999; font-weight: normal; font-style: italic; }
  .formulariodemo input::-webkit-input-placeholder { color: #999; font-weight: normal; font-style: italic; }
  .formulariodemo input:-ms-input-placeholder { color: #999; font-weight: normal; font-style: italic; }

  /* aquí iría el estilo de del atributo required si es que se desea definirlo */
  .formulariodemo input:required { box-shadow: none; }

   /* el botón de envio */
  .formulariodemo button {
    background-color: #9099A1;
    border: none;
    border-radius: 0 3px 3px 0;
    color: #FFF;
    cursor: pointer;
    float: right;
    font-family: Tahoma;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    overflow: visible;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    width: 110px;
  }
  .formulariodemo button:hover{ background: #E54040; } 
  .formulariodemo button:active, .formulariodemo button:focus{ background: #C42F2F; }
  .formulariodemo button:before { /* el detalle del triángulo izquierdo */
    content: "";
    border-color: transparent #9099A1 transparent;
    border-style: solid solid solid none;
    border-width: 8px 8px 8px 0;
    left: -6px;
    position: absolute;
    top: 12px;
  }
  .formulariodemo button:hover:before { border-right-color: #E54040; }
  .formulariodemo button:focus:before { border-right-color: #C42F2F; }    

</style>
Y este sería el resultado final:

16 comentarios:

Cocina  

Me encanta!hoy renuevo mi triste caja de busqueda!
gracias JM!

Responder
Rosendo Ramírez  

Wow esta muy bonito en su estilo, pero me quedo con el El Buscador Personalizado Google... :D

Responder
Jorge Ángel Aussel  

Hola, necesito hacerte una consulta pero no tiene que ver con ésta entrada.

En mi blog (jorgeaussel.com) uso la plantilla Fantástico, S.A. Awesome Inc. y tengo un problema de visualización en Internet Explorer. Resulta que al cargar la página, debajo del footer aparece un inmenso espacio en blanco que se ve realmente mal.

Este problema no sólo me sucede a mí, sino a cualquier persona que use esa misma plantilla. Y estoy casi seguro que el problema podría derivar de alguna de las variables, porque fui probando quitar todo el CSS y el espacio seguía apareciendo.

Otra cosa que probé fue aplicar una plantilla Simple y borrar el CSS y pegar el de la plantilla Awesome, pero el espacio no desaparecía.

Si me podrías ayudar te lo agradecería mucho. Saludos.

JMiur  

En esas plantillas nuevas de Blogger las cosas son muy complicadas.

Prueba agregar esto justo después de &lthead> para que sea lo primero en ejecutarse:

<meta content='IE=8' http-equiv='X-UA-Compatible'/>

porque como Blogger agrega lo mismo luego pero respecto a IE-7, obliga a que las versiones 8 funcionen como 7 y se vea mal. Con esa etiqueta, estás diciéndole a IE que no use el modo compatibilidad.

Jorge Ángel Aussel  

¡Funcionó! ¡Muchísimas, pero muchísimas gracias! Me estaba volviendo loco ese detalle...

JMiur  

Perfecto, Jorge :D

Responder
Adrián J. Messina  

Muy bueno! Un look moderno y muy útil, gracias por el concejo. Abrazo.

Responder
Anónimo  

Yo tengo el mismo problema que Jorge. Uso Firefox y no me funcionó insertar ese código ni en Firefox, ni en IE, ¿alguna sugerencia? :(

JMiur  

Habría que ver tu ejemplo para tratar de entender el problema ya que funciona en cualquier navegador.

Responder
Unknown  

Hola, Jorge. He probado a usar este buscador en mi blog, encima de la cabecera, pero intento alinearlo a la derecha y sigue quedando centrado encima de la cabecera. Si le echas un vistazo a mi blog puedes ver colocado un buscador básico; justo ahí es donde quiero usar éste.

JMiur  

Tendrías que colocar el buscador en el blog para que pueda ver cuáles son las reglas de estilo que están faltando o deben modificarse.

Responder
Admin Catálogo Juegos PC  

Lo usaré, le dará más estilo a mi sitio, gracias.

Responder
Jorge MG  

¿se puede hacer que el borde y el botón "buscar" solo se muestren cuando el input está seleccionado (focus)?

JMiur  

Deberás ocultar el boton por defecto y quitar el borde para luego activarlos con ese evento.

La regla de estilo para focus es:
.formulariodemo input:focus { }

y esta otra controlaría el boton:
.formulariodemo input:focus + button { }

Jorge MG  

gracias por el dato, no conocia esta funcion, pensaba que solo se podia hacer si un elemento estaba dentro de otro

JMiur  

El símblo más + indica al elemento adyacente. Hay muchas pseudo-clases y pseudo-elementos de ese tipo.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR