wake-up-neo.net

Bootstrap Glyphicon zum Eingabefeld hinzufügen

Wie kann ich einem Texteingabefeld ein Glyphicon hinzufügen? Zum Beispiel möchte ich 'icon-user' in einer Benutzernameneingabe haben, ungefähr so:

enter image description here

330
doovers

Ohne Bootstrap:

Wir werden in einer Sekunde zu Bootstrap kommen, aber hier sind die grundlegenden CSS-Konzepte im Spiel, um dies selbst zu tun. Wie Bart der Beute zeigt , können Sie dies mit CSS tun, indem Sie das Symbol absolut innerhalb des Eingabeelements positionieren. Fügen Sie dann zu beiden Seiten einen Abstand hinzu, damit sich der Text nicht mit dem Symbol überschneidet.

Also für folgendes HTML:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Sie können das folgende CSS verwenden, um Glyphen nach links und rechts auszurichten:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo in Plunker

css screenshot

Anmerkung: Dies setzt voraus, dass Sie Glyphicons verwenden, funktioniert aber genauso gut mit font-awesome .
Für FA ersetzen Sie einfach .glyphicon durch .fa


Mit dem Bootstrap:

Wie Puffer weist darauf hin , kann dies nativ in Bootstrap erreicht werden, indem Validierungszustände mit optionalen Symbolen verwendet wird. Dazu geben Sie dem .form-group -Element die Klasse .has-feedback und dem Symbol die Klasse .form-control-feedback.

Das einfachste Beispiel wäre etwa so:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Profis:

  • Beinhaltet Unterstützung für verschiedene Formulartypen (Basic, Horizontal, Inline)
  • Beinhaltet Unterstützung für verschiedene Steuerelementgrößen (Standard, Klein, Groß)

Nachteile:

  • Unterstützt keine linken Ausrichtungssymbole

Um die Nachteile zu überwinden, habe ich dieses Pull-Request mit Änderungen zusammengestellt, um linksbündige Symbole zu unterstützen. Da es sich um eine relativ große Änderung handelt, wurde sie bis zu einer zukünftigen Version verschoben. Wenn Sie diese Funktionen jedoch benötigen heute -, finden Sie hier einen einfachen Implementierungsleitfaden:

Fügen Sie einfach das diese Formänderungen in CSS ein (auch inline über verstecktes Stack-Snippet am unteren Rand)
* WENIGER: Alternativ, wenn Sie Bauen über weniger sind, ist hier das Formänderungen in weniger

Dann müssen Sie nur noch die Klasse .has-feedback-left für jede Gruppe mit der Klasse .has-feedback einfügen, um das Symbol linksbündig auszurichten.

Da es viele mögliche HTML-Konfigurationen für verschiedene Formulartypen, verschiedene Steuerelementgrößen, verschiedene Symbolsätze und verschiedene Beschriftungssichtbarkeiten gibt, habe ich eine Testseite erstellt, die den richtigen HTML-Satz für jede Permutation zusammen mit einer Live-Demo anzeigt.

Hier ist eine Demo in Plunker

feedback screenshot

P.S.frizi's Vorschlag das Hinzufügen von pointer-events: none; wurde zum Bootstrap hinzugefügt

Nicht gefunden, wonach Sie gesucht haben? Versuchen Sie diese ähnlichen Fragen:

Zusätzliches CSS für linksbündige Feedback-Symbole

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}
733
KyleMit

Die offizielle Methode. Kein benutzerdefiniertes CSS erforderlich:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Diese Demo basiert auf einem Beispiel in Bootstrap Dokumenten. Scrollen Sie hier nach unten zu "Mit optionalen Symbolen" http://getbootstrap.com/css/#forms-control-validation

enter image description here

61
user

Hier ist eine reine CSS-Alternative. Ich habe dies für ein Suchfeld eingerichtet, um einen ähnlichen Effekt wie Firefox (und hundert andere Apps) zu erzielen.

Hier ist eine Geige .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}
42
beardofprey

So habe ich es nur mit dem voreingestellten bootstrap CSS v3.3.1 gemacht:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Und so sieht es aus:

enter image description here

11
Garry English

Dieser "Cheat" funktioniert mit dem Nebeneffekt, dass die Glyphicon-Klasse die Schriftart für das Eingabesteuerelement ändert.

Geige

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Wenn Sie den Nebeneffekt beseitigen möchten, können Sie die "Glyphicon" -Klasse entfernen und das folgende CSS hinzufügen.

Geige

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Möglicherweise eine noch sauberere Lösung:

Geige

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />
8
greenbender

Dies kann mit Klassen aus der offiziellen bootstrap 3.x-Version ohne benutzerdefinierte CSS erfolgen.

verwenden Sie input-group-addon vor dem Eingabe-Tag, innerhalb von input-group, und verwenden Sie dann eines der Glyphicons. Hier ist der Code

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Hier ist die Ausgabe

enter image description here

Um es weiter anzupassen, fügen Sie Ihrer custom.css-Datei ein paar Zeilen custuom css hinzu (passen Sie den Abstand an, falls erforderlich).

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Wenn Sie den Hintergrund des input-group-addon transparent machen und den linken Verlauf des Eingabe-Tags auf Null einstellen, wird die Eingabe nahtlos angezeigt. Hier ist die benutzerdefinierte Ausgabe

enter image description here

Hier ist ein jsbin Beispiel

Dadurch werden die benutzerdefinierten CSS-Probleme behoben, die durch Überlappung mit Beschriftungen, Ausrichtung bei Verwendung von input-lg und Fokussierung auf Tabulatorprobleme entstehen.

7
Dheeraj

Hier ist eine Nicht-Bootstrap-Lösung, mit der Sie Ihr Markup einfach halten können, indem Sie die Bilddarstellung des Glyphicons mithilfe der Base64-URI-Codierung direkt in das CSS einbetten.

input {
  border:solid 1px #ddd;
}
input.search {
        padding-left:20px;
        background-repeat: no-repeat;
        background-position-y: 1px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
6
mccainz

Wenn Sie Fontawesome verwenden, können Sie dies tun:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Ergebnis

enter image description here

Die vollständige Unicode-Liste finden Sie in Die vollständige Symbolreferenz für Font Awesome 4.6.

6
Merlin
input {
  border:solid 1px #ddd;
}
input.search {
        padding-left:20px;
        background-repeat: no-repeat;
        background-position-y: 1px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">
4
Angel Patel

Hier ist eine andere Möglichkeit, dies zu tun, indem Sie das Glyphikon mit dem Pseudoelement :before in CSS platzieren.

Arbeitsdemo in jsFiddle

Für diesen HTML:

_<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>
_

Verwenden Sie dieses CSS ( Bootstrap 3.x und kompatible Webkit-basierte Browser )

_.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}
_

Wie @Frizi sagte, müssen wir _pointer-events: none;_ hinzufügen, damit der Cursor den Eingabefokus nicht beeinträchtigt. Alle anderen CSS-Regeln dienen zum Zentrieren und Hinzufügen des richtigen Abstands.

Das Ergebnis:

screenshot

4
Richard Cotrina

Sie können den Unicode-HTML-Code verwenden

Fügen Sie zum Hinzufügen eines Benutzersymbols einfach &#xe008; zum Attribut placeholder hinzu, oder wo immer Sie möchten.

Vielleicht möchten Sie dieses Spickzettel .

Beispiel:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Vergessen Sie nicht, die Schriftart der Eingabe mit dem folgenden Code auf Glyphicon one zu setzen: font-family: 'Glyphicons Halflings', Arial, wobei Arial die Schriftart von ist regulärer Text in der Eingabe.

1
Mona Lisa

Getestet mit Bootstrap 4.

Nehmen Sie einen form-control und fügen Sie seiner Klasse is-valid hinzu. Beachten Sie, wie das Steuerelement grün wird. Beachten Sie jedoch vor allem das Häkchensymbol rechts neben dem Steuerelement. Das wollen wir!

Beispiel:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
        <input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>
1
Igor Krupin

Ich habe auch eine Entscheidung für diesen Fall mit Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Bei der Eingabe habe ich so etwas: enter image description here

1

Sie sollten in der Lage sein, dies mit vorhandenen Klassen bootstrap und einem kleinen benutzerdefinierten Stil zu tun.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Bearbeiten Das Symbol wird über die Klasse icon-user referenziert. Diese Antwort wurde zum Zeitpunkt von Bootstrap Version 2 geschrieben. Den Verweis finden Sie auf der folgenden Seite: http://getbootstrap.com/2.3.2/base-css.html# Bilder

0
YOOOEE

Wenn Sie das Glück haben, nur moderne Browser zu benötigen, versuchen Sie es mit css transform translate. Dies erfordert keine Wrapper und kann angepasst werden, sodass Sie mehr Abstand für die Eingabe [Typ = Nummer] zulassen können, um den Eingabespinner aufzunehmen, oder ihn links vom Griff verschieben können.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=11

0
httpete