Cómo HACER - Formulario de búsqueda animado
Aprenda a crear un formulario de búsqueda animado con CSS.
Cómo crear un formulario de búsqueda animado
Haga clic en el campo de entrada:
Paso 1) Agregar HTML:
Ejemplo
<input type="text" name="search" placeholder="Search..">
Paso 2) Agregar 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%;
}
Sugerencia: vaya a nuestro tutorial de formularios HTML para obtener más información sobre los formularios HTML.
Vaya a nuestro tutorial de formularios CSS para obtener más información sobre cómo diseñar formularios HTML.