Dans ce tutoriel tout simple, nous allons voir principalement comment faire la barre de recherche de l’iphone, celle des pages internet de Safari. Mais également comment customiser un formulaire avec quelques petites images toute simple et comment arrondir vos formulaire ou tout autre div.

Vous trouverez un aperçu du résultat sur ce blog, dans la barre de navigation, à droite.
Il y en faite trois fichiers, le fond de la barre de recherche, le fond du bouton, et un petit hover. Mais le hover reste en option.

Note : Les bordures sont plus optimiser sous Safari et Firefox 3. On aperçoit de petit pixel blanc sous Firefox 2.

Il vous faut tout d’abord télécharger les trois fichiers images qui donneront l’effet iPhone.
Search Bar, Bouton et le Bouton Hover. Clique droit & enregistrez-sous… c’est est toujours le meilleur moyen d’enregistrer une image…

Ensuite passons aux choses sérieuses…

1/ La barre de recherche :
Voici le code, simple, de la barre de recherche. Optimiser pour WordPress

<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?/>" name="s" id="s" class="text" />
<input type="submit" id="searchsubmit" value="Rechercher" class="button" />
</form>

Nous avons donc attribué un “id” au formulaire pour lui appliquer, par la suite un style CSS (id=”search”). De même pour le bouton “Rechercher” (class=”bouton”)

Le résultat est sans appel, nous avons une barre de recherche très moche. nous allons donc mettre en place la feuille de style.

2/ a. La feuille de style CSS : Le champ de recherche
Voici le code CSS pour donner du style au camp de recherche. L’url du fond est à modifier par la votre. La balise “border-radius” vous permet d’arrondir les bordures du champ… à vous de le personnalisé.

#search {
	float: right;
	height: 20px;
	padding-top: 6px;
	margin-top: 0 !important;
}
#search input.text {
	font-size: 10px;
	padding: 3px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	height: 15px;
	vertical-align: top;
	background: #ffffff  url(http://www.geekeries.fr/wp-content/themes/web/images/bg_search.png) repeat-x;
	border: 1px solid #333333;
	margin-right: 6px;
	color: #333333;
	float: left;
	width: 150px;
}

2/ b. La feuille de style CSS : Le bouton
Voici le code CSS pour donner du style à votre bouton. Le hover peut être enlever, il suffit de supprimer l’url de “#search input.button:hover”. La balise “border-radius” vous permet d’arrondir les bordures du champ… à vous de le personnalisé.

#search .button {
	font-size: 12px;
	cursor: pointer;
	width: 90px;
	height: 22px;
	padding: 0 3px;
	border: 1px solid #3b4144;
	-moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	float: left;
	background: #ffffff  url(http://www.geekeries.fr/wp-content/themes/web/images/bg_searchbt.png) repeat-x;
	color: #333333;
}
#search input.button:hover {
	color: #000000;
	background: #ffffff  url(http://www.geekeries.fr/wp-content/themes/web/images/bg_searchbtn.png) repeat-x;
	border: 1px solid #3b4144;
}

Et voilà, vous avez “normalement” une barre ressemblant a celle de l’iPhone.