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

Comment implémenter un bouton de recherche dans un champ de saisie de texte

Pour imiter l'élément de recherche trouvé sur de nombreux sites Web, vous pouvez combiner un texte champ de saisie avec une balise span.

Ajout du bouton de recherche

Enroulez le bouton de recherche dans la balise span :

<code class="html"><span id="g-search-button"><img src="magnifying-glass.png" alt="Search"></span></code>

Styliser le bouton

Pour positionner le bouton à gauche de la saisie de texte, appliquez des styles personnalisés :

<code class="css">#g-search-button {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  left: -22px;
  top: 3px;
  background-color: black;  /* Replace with your image URL */
}</code>

Acquisition de l'image de la loupe

Vous pouvez trouver des images de loupe gratuites sur des sites Web comme IconFinder ou The Noun Project.

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!