Aujourd'hui, je vais vous présenter comment utiliser les images d'arrière-plan en CSS pour concevoir votre champ de recherche. J'ai déjà utilisé d'autres méthodes pour implémenter mon formulaire et mon champ de recherche, mais cette méthode semblait plus simple, j'ai donc pensé la partager avec toute personne intéressée.
Voir
la méthode originale de la démo Jetons d'abord un coup d'œil à ma méthode originale d'utilisation de <input type="image" src="image_url" /> :
<form method="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<ensemble de champs>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Recherche" class="btn" />
</fieldset>
</form>Cela a l'air bien, mais il y a un inconvénient. Le bouton image ne correspond pas au champ de recherche. J'ai dû utiliser un attribut margin-top négatif pour corriger ce bug.
la méthode originale
Dans cette version améliorée de la méthode, j'ai décidé de ne pas utiliser type="image" mais d'utiliser la balise <button> puis d'ajouter l'arrière-plan en utilisant CSS. Cela permet aux zones de saisie de texte et aux boutons de s'aligner automatiquement. J'ai également ajouté une pseudo-classe :focus à l'effet final (IE ne le supportera pas, j'ai donc ajouté un style spécial pour IE pour masquer cet effet). Voici quelques avantages de cette approche :
Alignement naturel utilisant une seule image pour les boutons et les champs de saisie
La pseudo-classe :focus prend en charge les navigateurs qui ajoutent des effets de survol aux boutons.
HTML
<form method="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="recherche">
<input type="text" class="box" />
<button class="btn" title="Soumettre la recherche">Rechercher</button>
</fieldset>
</form>CSS
champsset.search {
bordure : aucune ;
largeur : 243 px ;
marge : 0 automatique ;
arrière-plan : #222 ;
}
Entrée .search, bouton .search {
bordure : aucune ;
flotteur : gauche ;
}
.search input.box {
couleur : #fff ;
taille de police : 1,2 em ;
largeur : 190 px ;
hauteur : 30px ;
remplissage : 8px 5px 0 ;
arrière-plan : #616161 url(search_bg.gif) sans répétition ;
marge droite : 5px ;
}
.search input.box:focus {
arrière-plan : #616161 url(search_bg.gif) sans répétition à gauche -38px ;
contour : aucun ;
}
.bouton de recherche.btn {
largeur : 38px ;
hauteur : 38px ;
curseur : pointeur ;
retrait du texte : -9999px ;
arrière-plan : #fbc900 url(search_bg.gif) sans répétition en haut à droite ;
}
.bouton de recherche.btn: survoler {
arrière-plan : #fbc900 url(search_bg.gif) sans répétition en bas à droite ;
}Commentaires spéciaux IE
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
Un ami a commenté que IE6 et IE7 feraient défiler l'image d'arrière-plan horizontalement si vous saisissiez trop de texte. Mon approche consistait donc à utiliser une image d'arrière-plan distincte spécifiquement pour IE, et au lieu de l'aligner à gauche, je l'ai retournée et j'ai aligné l'arrière-plan. image à droite pour résoudre ce problème.
.search input.box {
arrière-plan : url(search_bg_ie.gif) sans répétition en bas à droite ;
/* Une image d'arrière-plan indépendante spécifiquement pour IE, et cette image doit être alignée à droite. ***/
}