Buscador desplegable con transiciones solo CSS


Check out this Pen!

Funcionamiento del código de codepen

La clave para generar este buscador desplegable reside en la interacción entre el label y el input.

Cuando hacemos click en el icono de  que se encuentra en la etiqueta label, el navegador establece el foco en el campo de input enlazado.

Una vez el elemento de input recibe el foco, modifica su ancho y gracias a transiciones CSS3 genera el efecto.

Un punto a tener en cuenta es que el campo input cuando esta plegado debe tener al menos un ancho de 1px para que la transición funcione correctamente.

La etiqueta de form se encarga de generar la presentación con box-shadow, border-radius y border.

buscador-desplegable-resaltados

Si te ha gustado dale a en codepen

Por Javier Artero

, ,

Warning: Parameter 1 to W3_Plugin_TotalCache::ob_callback() expected to be a reference, value given in /usr/home/javierartero.com/web/wp-includes/functions.php on line 3328