Estilização de caixas de busca

Introdução

A maioria dos sites disponibiliza aos seus visitantes um mecanismo destinado a encontrar conteúdos no site, como meio auxiliar extremamente útil da navegação. São as conhecidas e consagradas caixas de busca.

Você pode inserir uma caixa de busca "pronta", fornecida por terceiros, tal como o mecanismo de pesquisa personalizada do Google ou criar e estilizar sua própria caixa de busca.

O uso de um serviço de terceiro tem como vantagem a simplicidade de instalação que exige além do cadastramento, normalmente gratuito, para obtenção de um ID tão somente copiar e colar um código pronto fornecido pelo terceiro. A desvantagem é que tais mecanismos, apesar do nome "pesquisa personalizada", de personalizável tem somente a funcionalidade de realizar a busca no site e em alguns casos a opção de busca na web. A estilização com todos os recursos das CSS não é possível e você precisa aceitar um layout padrão com poquíssimas variações que muitas vezes não são são convenientes com o layout do seu site.

Nesse tutorial, estudaremos do desenvolvimento frontend (HTML + CSS) de uma caixa de busca com foco principal na estilização, com a finalidade de mostrar algumas variações de layout e principalmente estimular o leitor a criar outras variações.

Se conseguirmos motivá-lo e você resolver mostrar suas criações para os colegas fique à vontade para publicá-la, no seu site, blog, no Fiddle, no CodePen ou em qualquer interface pública de compartilhamento e POSTE O LINK nos comentários.

Marcação HTML

Adotaremos uma marcação HTML inicial para uma caixa de busca típica, que poderá sofrer pequenas modificações conforme o layout a criar. Tais pequenas modificações serão mostradas quando for o caso. A marcação é confome a seguir:

HTML

<form action=" " method="post">
  <label for="busca">Buscar</label>
  <input type="search" id="busca" name="q">
  <button type="submit">OK</button>
</form>

A renderização padrão do navegador para a caixa de busca conforme marcada é mostrada a seguir:

🙌   BONUS

1. Os elementos LABEL, INPUT e BUTTON são do tipo inline e o elemento FORM é do tipo nível de bloco.
2. Sendo LABEL, INPUT e BUTTON do tipo inline o espaçamento entre eles é devido a marcação, tal como uma palavra é separada da outra em um texto. Junte os 3 elementos (sem espaços entre eles) em uma linha na marcação e eles serão renderizados juntos.
3. É mandatório o uso do elemento LABEL, que poderá ser explícito, como no exemplo ou implícito (como container do campo a que se refere e nesse caso não há necessidade de uso do atributo for.).
4. O uso do atributo, facultativo, placeholder (Palavra chave no exemplo) fornece uma dica de preenchimento do campo e NÃO é substituto para o elemento LABEL.
5. Para envio de um formulário é indeferente usar o elemento BUTTON com o atributo type="submit", como no exemplo, ou elemento INPUT com o atributo type="submit". Nese caso a maior vantagem do uso do elemento BUTTON é que ele fornece mais flexibilidade para estilização.
6. Se você deixar em branco ou atribuir o valor # para o atributo action de um formulário ele será enviado para processamento para a mesma página onde se encontra o formulário.
7. Se você omitir o atributo action de um formulário ele será enviado para processamento para na mesma página onde se encontra o formulário. Mas, não faça isso, pois estará abrindo uma porta para um iframe clickjacking ataque (abre em nova janela).
8. Se você examinar o código fonte da página vai notar o uso do par onsubmit="return false" no elemento FORM. Esse é um artifício que usamos para evitar o envio do formulário caso o leitor clique o botão de envio de qualquer um dos formulários dos exemplos.

Layout #1

LABEL em cima do campo e alteração das dimensões do campo e do botão.

CSS

  label {display: block;}
  input, button {padding: 10px;}
  input {width: 50%;}

A renderização padrão do navegador para a caixa de busca conforme marcada é mostrada a seguir:

Layout #2

BOTÃO à direita dentro do campo.

O layout inicial para esse exemplo é idêntico ao anterior — layout #1

Para obter esse efeito vamos criar um container para o campo e botão. A finalidade do container e estabelecer um contexto de posicionamento para o campo e botão, como mostrado a seguir:

HTML

<form action=" " method="post">
  <label for="busca">Buscar</label>
  
  <div class="container">  
    <input type="search" id="busca" name="q">
    <button type="submit">OK</button>
  </div>

</form>

CSS

.container {
  width: 50%; /* define a largura do campo */ 
  position: relative;  /* cria o contexto de posicionamento do botão */ 
}
label {display:block;}
input {width: 100%;} /* define a largura do campo igual a largura do container */
input,  button {padding: 10px;}
button {
  position: absolute;   
  top: 0; 
  right: 0;
  /* posiciona o botão em relação ao container, mas
  como o campo está exatamente contido no container
  o posicionamento se dá também em relação ao campo */
}

A renderização para esse layout é mostrada a seguir:

Layout #3

BOTÃO à esquerda dentro do campo.

Esse é uma variação do layout #2

Para obter esse efeito basta alterar a coordenada horizontal de posicionamento do botão e aumentar o espaçamento à esquerda do texto do palceholder. As moficações nas regras CSS são mostradas a seguir:

CSS

...
button {
  position: absolute;   
  top: 0; /* alterado aqui */
  left: 0;
}
input {padding-left: 60px;} /* alterado aqui */

A renderização para esse layout é mostrada a seguir:

Layout #4

BOTÃO com entidade HTML.

Esse é uma varição do layout #2

Para obter esse efeito basta substituir o conteúdo textual do botão (OK no nosso exemplo) por um caractere HTML, tais como nos dois exemplos mostrados a seguir:

HTML

...
/* exemplo 1 */
<button type="submit">&#128269;</button>

/* exemplo 2 */
<button type="submit">&#10151;</button>

A renderização para esses dois casos do layout #4 é mostrada a seguir:

🙌   NOTAS

1. Você pode obter o mesmo efeito usando icon fontes, tal como o font awesome (abre em nova janela).
2. Entidades HTML e icon fontes podem ser estilizadas como se texto fossem, ou seja a elas se aplicam as propriedades CSS válidas para textos, tais como: font-size e color. Para entidades nativamente coloridas não se aplica a propriedade color.
3. Você pode mostrar somente o conteúdo do botão (texto, entidade HTML ou icone) e esconder a cor de fundo e as bordas do botão. Basta declarar button { background: none; border: none; } como mostrado a seguir:
   
   Buscar

   ➧

Layout #5

Campo de busca expansível.

Esse efeito consiste em se apresentar ao usário apenas o botão de busca (em geral o ícone de uma lupa ou o ícone é a palavra busca) que ao receber o foco revela o campo da busca. As regras CSS para obtenção desse efeito são mostradas a seguir:

CSS

.container {
  width:100%;
  position: relative;
  height: 50px;
}
input {
  height: 50px;
  border: none;
  outline: none;
  padding-left: 50px;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  z-index: 3;
  transition: width 1s ease-out;
  cursor: pointer;
}
input:focus { 
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 100%;
  z-index: 1;
  transition: width 1s ease-in;
}
button { 
  height: 50px;
  width: 50px;
  background:  url('lupa.png')  center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* esconde o LABEL "Buscar" */
label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;	
}

A renderização para esse layout é mostrada a seguir:
clique a lupa

Compartilhe essa matéria com seus amigos