Comment créer un bouton « Rechercher » personnalisé avec une icône en forme de loupe ?

Embellissement des champs de saisie de texte avec un bouton « Recherche » personnalisé

Pour créer un élément de recherche similaire à celui vu sur certains sites Web, suivez ces étapes :

Création de la structure de base :

1. Coder un champ de saisie de texte :

<code class="html"><input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /></code>

2. Incluez un balise pour contenir l'image de la loupe :

<code class="html"><span id="g-search-button"></span></code>

Ajout de l'image de la loupe :

Pour incorporer l'image de la loupe, attribuez-la à l'aide de l'arrière-plan CSS -propriété de l'image :

<code class="css">#g-search-button {
  background-color: black;  /* Replace with your own image */
}</code>

Positionnement et style :

Pour positionner l'image dans le champ de saisie de texte :

<code class="css">#g-search-button {
  position: relative;
  left: -22px;
  top: 3px;
  width: 16px;
  height: 16px;
}</code>

Cela place l'image légèrement vers la gauche, chevauchant le bord droit du champ de recherche.

Personnalisation :

Modifiez l'apparence du bouton en ajustant les valeurs dans le #g -bloc CSS de bouton de recherche, y compris la couleur d'arrière-plan, la taille et le positionnement.

Exemple en action :

Référez-vous à l'exemple JSBin suivant pour voir un exemple entièrement fonctionnel implémentation de l'élément de recherche :

[JSBin Demo](https://jsbin.com/xahepu/edit?html,css,output)

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!