Maison > interface Web > tutoriel CSS > Comment créer un bouton de recherche dans un champ de saisie de texte ?

Comment créer un bouton de recherche dans un champ de saisie de texte ?

DDD
Libérer: 2024-11-02 10:15:03
original
702 Les gens l'ont consulté

How to Create a Search Button within a Text Input Field?

Création d'un bouton de recherche dans un champ de saisie de texte

Pour obtenir l'élément de recherche vu dans la capture d'écran fournie, vous avez besoin à la fois d'une saisie de texte field et un élément span adjacent.

Le champ de saisie de texte peut être créé à l'aide du code suivant :

<input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" />
Copier après la connexion

Pour l'image en forme de loupe, vous pouvez utiliser la propriété background-image pour superposer dans l'élément span. De plus, le positionnement relatif peut être utilisé pour aligner l'image avec l'extrémité droite du champ de recherche.

#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;

  background-color: black;  /* Replace with your own image */
}
Copier après la connexion

Dans le code CSS, la largeur et la hauteur déterminent la taille de l'image, tandis que les extrémités gauche et supérieure les propriétés le positionnent par rapport au champ de recherche. La propriété background-color peut être remplacée par l'URL de l'image en forme de loupe souhaitée.

Voici un exemple fonctionnel sur JSBin pour démontrer : [Lien vers l'exemple JSBin]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal