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

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!