Como criar: caixa de pesquisa animada

Aprenda a usar CSS para criar formulários de pesquisa animados.

Clique no campo de entrada:

Como criar uma caixa de pesquisa animada

Primeiro passo - Adicionar HTML:

<input type="text" name="search" placeholder="Search..">

Segundo passo - Adicionar CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Quando o campo de entrada ganha foco, altera sua largura para 100% */
input[type=text]:focus {
  width: 100%;
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Formulário HTML

Tutorial:Formulário CSS