Comment ajouter des icônes aux champs de saisie de recherche avec Bootstrap ?

Champ de saisie de recherche avec Icon Bootstrap

Dans cette ère moderne de Bootstrap 5 et au-delà, la personnalisation des champs de saisie de recherche avec des icônes est devenue un jeu d'enfant . Examinons deux approches principales pour incorporer des icônes dans vos entrées de recherche.

Bootstrap 5 Beta

Bootstrap 5 nous fournit la classe input-group, qui s'intègre parfaitement à champs de saisie. Voici comment vous pouvez l'utiliser :

<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">

Bootstrap 4 (réponse originale)

Si vous travaillez avec Bootstrap 4, envisagez d'utiliser la classe input-group ainsi :

<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">

Options supplémentaires pour Bootstrap 4 :

• Manipulation des bordures : Utilisez les classes utilitaires Bootstrap comme border-right-0 ou border-left-0 pour créer des entrées où l'icône semble flotter à l'intérieur du champ .
• Texte du groupe d'entrée : Utilisez le texte du groupe d'entrée avec un arrière-plan transparent pour obtenir le même résultat. effet.
• Système de grille : Tirez parti du système de grille (lignes et colonnes) sans espacement des gouttières pour créer des transitions transparentes entre l'entrée et l'icône.

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!