Un joli champ de recherche

C’est fou le temps qu’on perd quand on a oublié comment on faisait si simplement quelque chose. Dans le thème de mon blog WordPress, j’ai intégré un bouton de recherche propriétaire de Safari super sympa. Par contre, il m’a fallu un peu de temps pour en réaliser un équivalent pour les autres navigateurs ! L’idée était de partir d’un bouton de recherche basique avec un texte d’accroche qui s’efface quand on clique dans le champ, un petit logo dans le coin et des bords arrondis. Voici donc une méthode pas à pas.

Tout d’abord, voici un formulaire basique, c’est-à-dire un champ sans bouton qui lance automatiquement la recherche quand on tape entrée :

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input name="s" type="text" />
</form>

Je vais lui appliquer un style spécifique avec des couleurs sobres et des bords arrondis. Pour cela, je rajoute un paramètre « class » à mon champ de recherche.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" name="s" type="text" />
</form>

Grâce à cet élément, je vais pouvoir appliquer un style à mon champ de recherche avec CSS3 en modifiant ma feuille de style. Les instructions qui suivent sont suffisamment commentées pour que vous compreniez chaque propriété.

.recherche {
	/* Définition de bordure grise supérieure */
	border-top: solid 2px rgb(135,135,135);
 
	/* Ajout du logo en forme de loupe */
	background-image: url("lens.png");
	background-repeat:no-repeat;
 
	/* Marge à gauche pour ne pas écrire sur la loupe */
	padding-left: 20px;
 
	/* Le bloc qui suit défini les bords arrondis */
	/* Attention, IE n'est pas compatible */
	border-radius: 10px;			/* instruction standard */
	-moz-border-radius: 10px;		/* spécifique Mozilla */
	-webkit-border-radius: 10px;		/* spécifique WebKit (Safari, Chrome etc.) */
	-opera-border-radius: 10px;		/* spécifique Opera */
}

Il me reste maintenant à gérer l’affichage d’une invite de texte. La solution adoptée consiste à définir une valeur par défaut. Pour que cette valeur disparaisse avant la saisie il faut aussi ajouter un événement qui, lors du clic de souris, l’efface.

?Afficher le code HTML4STRICT
<form action="MonAction" method="get">
<input class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Et voilà pour la syntaxe. Afin de l’adapter à vos usages, prenez bien soin de corriger l’action et le nom. Une version WordPress de la chose ressemblerait à ceci :

?Afficher le code HTML4STRICT
<form action="&lt;?php bloginfo('home'); ?&gt;" method="get">
<input id="s" class="recherche" onclick="this.form.MonNom.value="" name="s" type="text" value="rechercher" />
</form>

Téléchargez ici le fichier exemple de cet article.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *