Cómo crear: cuadro de búsqueda animado

Aprenda a usar CSS para crear un formulario de búsqueda animado.

Haga clic en el campo de entrada:

Cómo crear un cuadro de búsqueda animado

Primer paso - Añadir HTML:

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

Segundo paso - Añadir CSS:

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
/* Cuando el campo de entrada obtiene el foco, cambia su anchura al 100% */
input[type=text]:focus {
  width: 100%;
}

Prueba personalmente

Páginas relacionadas

Tutoriales:Formulario HTML

Tutoriales:Formulario CSS