Créer la barre de recherche de l’iPhone en XHTML/CSS

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
[php]

[/php]

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é.
[css]
#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(https://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;
}
[/css]

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é.
[css]
#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(https://www.geekeries.fr/wp-content/themes/web/images/bg_searchbt.png) repeat-x;
color: #333333;
}
#search input.button:hover {
color: #000000;
background: #ffffff url(https://www.geekeries.fr/wp-content/themes/web/images/bg_searchbtn.png) repeat-x;
border: 1px solid #3b4144;
}
[/css]

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

Publié à l'origine le : 14 août 2008 @ 12 h 43 min

Pour compléter votre lecture.

👋 Hello,

Bienvenue sur BlogInfos.com !

Vous allez bientôt être redirigé vers notre partenaire ElegantThemes.com

Si vous ne souhaitez pas être redirigé vers notre partenaire et accéder à l’article, cliquez sur Fermer Maintenant.

FERMER MAINTENANT

DIVI - THÈME WORDPRESS

-10%

👋 Le site ElegantThemes.com propose une réduction de 10% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

En cliquant sur le lien « Fermer Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.