Maison  >  Article  >  interface Web  >  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
DDDoriginal
2024-11-02 10:15:03605parcourir

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" />

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 */
}

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!

Déclaration:
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