Buscador desplegable con transiciones solo CSS
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.
Si te ha gustado dale a en codepen