Placez l’icône de recherche près de la zone de texte en utilisant le bootstrap

J’utilise la zone de texte bootstrap par défaut en prenant toute la largeur de la colonne et je veux mettre l’icône de recherche à la fin de la zone de texte.

Mon code est comme ceci:

Je ne veux pas utiliser le groupe de saisie.

Veuillez suggérer une autre manière ou alterner le HTML avec le CSS.

Voici trois manières différentes de le faire:

capture d'écran

Voici une démo de travail dans Fiddle Of All Three

Validation:

Vous pouvez utiliser les états de validation du bootstrap natif ( No Custom CSS !):

 

Pour une discussion complète, consultez ma réponse pour append un glyphicon Bootstrap à la zone de saisie.

Groupe de saisie:

Vous pouvez utiliser la classe .input-group comme ceci:

 

Pour une discussion complète, voir ma réponse à l’ ajout de l’icône Twitter Bootstrap dans la zone de saisie

Groupe de saisie non stylé:

Vous pouvez toujours utiliser .input-group pour le positionnement, mais simplement remplacer le style par défaut pour que les deux éléments apparaissent séparés.

Utilisez un groupe d’entrée normal mais ajoutez la classe input-group-unstyled :

 

Puis changez le style avec le css suivant:

 .input-group.input-group-unstyled input.form-control { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .input-group-unstyled .input-group-addon { border-radius: 4px; border: 0px; background-color: transparent; } 

En outre, ces solutions fonctionnent pour toute taille d’entrée

Ajouter une classe avec une largeur de 90% à votre élément d’entrée et append la classe d’icone d’entrée suivante à votre span permettrait d’atteindre vos objectives.

 .input { width: 90%; } .input-icon { display: inline-block; height: 22px; width: 22px; line-height: 22px; text-align: center; color: #000; font-size: 12px; font-weight: bold; margin-left: 4px; } 

EDIT Par suggestion de Dan, il ne serait pas judicieux d’utiliser .input comme nom de la classe, d’autres plus spécifiques seraient conseillés. J’utilisais simplement .input comme un espace réservé générique pour votre css

  

Voici le CSS pour l’image à gauche:

 #funkystyling { background: white url(/path/to/icon.png) left no-repeat; padding-left: 17px; } 

Et voici le CSS pour l’image à droite:

 #funkystyling { background: white url(/path/to/icon.png) right no-repeat; padding-right: 17px; } 

J’ai bien aimé la réponse de @KyleMit sur la façon de créer un groupe d’entrée non stylé, mais dans mon cas, je voulais seulement que le côté droit ne soit pas dessiné – je voulais quand même utiliser un add-group-addon sur le côté gauche. Donc, j’ai fait ceci:

css

 .input-group.input-group-unstyled-right input.form-control { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .input-group-unstyled-right .input-group-addon.input-group-addon-unstyled { border-radius: 4px; border: 0px; background-color: transparent; } 

html

 

Vous pouvez le faire en CSS pur en utilisant le pseudo-élément: after et en faisant preuve de créativité avec les marges.

Voici un exemple d’utilisation de Font Awesome pour l’icône de recherche:

 .search-box-container input { padding: 5px 20px 5px 5px; } .search-box-container:after { content: "\f002"; font-family: FontAwesome; margin-left: -25px; margin-right: 25px; }