Maison > interface Web > tutoriel CSS > le corps du texte

Comment styliser les entrées de recherche avec des icônes dans Bootstrap ?

Mary-Kate Olsen
Libérer: 2024-11-12 13:41:01
original
1000 Les gens l'ont consulté

How to Style Search Inputs With Icons in Bootstrap?

Styliser les entrées de recherche avec des icônes dans Bootstrap

Bootstrap 4 a éliminé la prise en charge des glyphicons, mais il existe toujours des moyens d'incorporer des icônes dans les entrées de recherche . Voici quelques approches :

Utilisation des groupes d'entrée :

  • Bootstrap 5 :
<div class="input-group">
  <input class="form-control border-end-0 border rounded-pill" type="text" value="search">
Copier après la connexion
  • Bootstrap 4 :
<div class="input-group col-md-4">
  <input class="form-control py-2" type="search" value="search">
Copier après la connexion

Positionnement de l'icône à l'intérieur de l'entrée :

<input class="form-control py-2 border-right-0 border" type="search" value="search">
Copier après la connexion
Copier après la connexion

Utilisation du texte du groupe de saisie sans arrière-plan :

<input class="form-control py-2 border-right-0 border" type="search" value="search">
Copier après la connexion
Copier après la connexion

Autres options :

  • Système de grille :
<div class="row no-gutters">
  <div class="col">
    <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search">
Copier après la connexion
  • Icône de pré-ajout :
<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="...">
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal