Aprender cómo crear un formulario de búsqueda de animación con CSS.
Cómo crear un formulario de búsqueda de animación
Haga clic en el campo de entrada:
Paso 1) Añadir HTML:
Ejemplo
<input type="text" name="search" placeholder="Search..">Paso 2) Añadir CSS:
Ejemplo
.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%;
} Inténtalo tú mismo " Ir a nuestro Formas Tutorial CSS para aprender más sobre cómo el estilo formularios HTML.