Un formulaire de recherche « toggle »

Créer un formulaire de recherche « toggle »

Sur le thème par défaut twenty thirteen de wordpress, on peut remarquer l’input search qui s’ouvre lorsqu’on clique dessus. En suivant divers tutos sur le net, on trouve des solutions sans aucun js, juste du css.

voici le code:

See the Pen search in put by yuyazz (@yuyazz) on CodePen.

je place mon input pour l’exemple au centre, grâce à la technique height+ line-height+ text-align.
On place notre image en background de l’input search-field.
Ce sont les animations qui vont créer l’effet escompté :

-webkit-transition: width 400ms ease, background 400ms ease;
	transition:         width 400ms ease, background 400ms ease;

J’ai mis une width de 0px pour ne laisser apparaître que la loupe. Pour faire apparaître également le terme « search » par exemple, à coté de la loupe, il faut augmenter la width à environ 100 px.
C’est sur le focus qu’on va dessiner un contour , un background et une width à notre input pour qu’il soit visible avec l’animation.

Info utile, sur wordpress, je savais pas, mais les formulaires de recherche ressortent en html4 avec la fonction get_search_form(); pour autoriser un input search en html5, il faut placer la fonction suivante dans functions.php

add_theme_support('html5', array('search-form'));