Como fazer - Formulário de pesquisa animado
Aprenda a criar um formulário de pesquisa animado com CSS.
Como criar um formulário de pesquisa animado
Clique no campo de entrada:
Etapa 1) Adicionar HTML:
Exemplo
<input type="text" name="search" placeholder="Search..">
Etapa 2) Adicionar CSS:
Exemplo
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
Dica: Acesse nosso Tutorial de formulários HTML para saber mais sobre formulários HTML.
Acesse nosso Tutorial de formulários CSS para saber mais sobre como estilizar formulários HTML.