web-dev-qa-db-fra.com

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

J'utilise bootstrap par défaut, une zone de texte prenant toute la largeur de la colonne et je souhaite mettre l'icône de recherche à la fin de la zone de texte.

Mon code est comme ça:

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

Je ne veux pas utiliser le groupe d'entrée.

S'il vous plaît suggérer une autre manière ou alterner html avec css.

htmlcsstwitter-bootstraptwitter-bootstrap-3icons
39
Saurabh Mahajan

Voici trois façons différentes de le faire:

screenshot

Voici une démonstration de travail dans Fiddle De tous les trois

Validation:

Vous pouvez utiliser natif bootstrap états de validation ( Pas de CSS personnalisé!):

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

Pour une discussion complète, voir ma réponse à Ajouter un Bootstrap Glyphicon à la zone de saisie

Groupe d'entrée:

Vous pouvez utiliser le .input-group _ classe comme ceci:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

Pour une discussion complète, voir ma réponse à ajout de Twitter Bootstrap à la zone de saisie

Groupe d'entrée non-stylé:

Vous pouvez toujours utiliser .input-group pour le positionnement, mais remplacez simplement 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:

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

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

108
KyleMit

Ajouter une classe avec une largeur de 90% à votre élément input et ajouter la classe input-icon suivante à votre étendue donnerait ce que vous voulez, à mon avis.

.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 Selon la suggestion du dan, il ne serait pas sage d'utiliser .input comme nom de classe, certains plus spécifiques seraient conseillés. J'utilisais simplement .input en tant qu'espace générique pour votre css

3
Jim
<input type="text" name="whatever" id="funkystyling" />

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;
}
2
vishnu ferno

J'aimais la réponse de @ KyleMit sur la manière de créer un groupe d'entrées sans style, mais dans mon cas, je ne voulais que le côté droit sans style - je voulais toujours utiliser un addon de groupe d'entrée sur le côté gauche et le faire ressembler à un bootstrap normal. Alors j'ai fait ça:

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

<div class="input-group input-group-unstyled-right">
    <span class="input-group-addon">
        <i class="fa fa-envelope-o"></i>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-addon input-group-addon-unstyled">
        <i class="fa fa-check"></i>
    </span>
</div>
1
goat

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;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="search-box-container">
  <input type="text" placeholder="Search..."  />
</div>
0
Code Slinger