Comment créer un bouton « Rechercher » dans un champ de saisie de texte ?

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

Lors de la visualisation du code source de certains sites Web, vous remarquerez peut-être un message "recherche " élément constitué d'une zone de texte suivie d'un bouton "loupe". Cet article vous guidera dans le processus de création d'un élément similaire dans votre application Web.

Obtention de l'image "Loupe"

Pour créer la "loupe" image, vous pouvez utiliser une icône SVG ou une petite image PNG. Il existe de nombreuses ressources disponibles en ligne où vous pouvez trouver des icônes gratuites ou commerciales.

Mise en œuvre du bouton

Une fois que vous avez l'image, vous pouvez l'intégrer dans votre saisie de texte champ en utilisant CSS. Voici un exemple :

<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 own image */
}</code>

Dans ce code CSS :

• display: inline-block; permet de placer l'élément sur une ligne avec du texte.
• largeur et hauteur précisent les dimensions du bouton.
• position : relative; vous permet d'ajuster manuellement le positionnement du bouton.
• gauche et haut déplacez le bouton vers une position chevauchant l'extrémité droite du champ de recherche.
• la couleur d'arrière-plan peut être remplacée par une couleur réelle image.

Exemple de travail

Le JSBin suivant fournit un exemple fonctionnel du code : https://jsbin.com/vehobew/edit?html, css, sortie

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!