it-swarm.com.de

Platzieren Sie das Suchsymbol in der Nähe des Textfelds mit bootstrap

Ich verwende bootstrap standardmäßig ein Textfeld mit voller Spaltenbreite und möchte das Suchsymbol am Ende des Textfelds einfügen.

Mein Code ist wie folgt:

<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>

Ich möchte keine Eingabegruppe verwenden.

Bitte schlagen Sie einen alternativen Weg oder alternatives HTML mit CSS vor.

39
Saurabh Mahajan

Hier sind drei verschiedene Möglichkeiten:

screenshot

Hier ist eine funktionierende Demo in Fiddle Of All Three

Validierung:

Sie können native bootstrap Validierungsstatus ( Kein benutzerdefiniertes CSS!) Verwenden:

<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>

Eine vollständige Diskussion finden Sie in meiner Antwort auf . Füge ein Bootstrap Glyphicon zum Eingabefeld hinzu

Eingabegruppe:

Sie können die Klasse .input-group folgendermaßen verwenden:

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

Eine vollständige Diskussion finden Sie in meiner Antwort zu Hinzufügen von Twitter Bootstrap Symbol zum Eingabefeld

Nicht gestaltete Eingabegruppe:

Sie können weiterhin .input-group zum Positionieren verwenden, aber nur das zu erstellende Standard-Styling überschreiben Die beiden Elemente werden getrennt angezeigt.

Verwenden Sie eine normale Eingabegruppe, aber fügen Sie die Klasse input-group-unstyled Hinzu:

<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>

Dann ändere das Styling mit dem folgenden CSS:

.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;
}

Diese Lösungen funktionieren auch für jede Eingabegröße

108
KyleMit

Das Hinzufügen einer Klasse mit einer Breite von 90% zu Ihrem Eingabeelement und das Hinzufügen der folgenden Eingabe-Symbol-Klasse zu Ihrer Spanne würde das erreichen, was Sie denken.

.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 Per dans Vorschlag wäre es nicht ratsam, .input als Klassennamen zu verwenden, einige spezifischere wären ratsam. Ich habe einfach .input als allgemeinen Platzhalter für Ihr CSS verwendet

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

Hier ist das CSS für das Bild auf der linken Seite:

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

Und hier ist das CSS für das Bild auf der rechten Seite:

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

Ich mochte die Antwort von @ KyleMit, wie man eine nicht gestylte Eingabegruppe erstellt, aber in meinem Fall wollte ich nur die rechte Seite nicht gestylt sehen - ich wollte immer noch ein Eingabegruppen-Addon auf der linken Seite verwenden und es wie ein normaler Bootstrap aussehen lassen. Also habe ich das gemacht:

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

Sie können dies in reinem CSS tun, indem Sie das: after-Pseudoelement verwenden und mit den Rändern kreativ werden.

Hier ist ein Beispiel, bei dem Font Awesome als Suchsymbol verwendet wird:

.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