Banner propaganda da DevMedia - Cursos de desenvolvimento web

Estilização de caixas de busca

visualizações Publicado em: 23/02/2017

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:

entidade: &#128269; ............... renderização: 🔍
entidade: &#10151; ............... renderização: ➧

🙌   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:

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:

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo