Wie kann ich einem Texteingabefeld ein Glyphikon hinzufügen? Zum Beispiel möchte ich 'icon-user' in einer Benutzernameneingabe haben, ungefähr so:
css
twitter-bootstrap
glyphicons
doovers
quelle
quelle
Antworten:
Ohne Bootstrap:
Wir werden gleich zu Bootstrap kommen, aber hier sind die grundlegenden CSS-Konzepte im Spiel, um dies selbst zu tun. Wie der Bart der Beute hervorhebt , können Sie dies mit CSS tun, indem Sie das Symbol absolut innerhalb des Eingabeelements positionieren. Fügen Sie dann auf beiden Seiten Polster hinzu, damit sich der Text nicht mit dem Symbol überschneidet.
Also für den folgenden HTML:
Sie können das folgende CSS verwenden, um Glyphen nach links und rechts auszurichten:
Demo in Plunker
Mit Bootstrap:
Wie Buffer hervorhebt , kann dies nativ in Bootstrap mithilfe von Validierungszuständen mit optionalen Symbolen erreicht werden . Dazu geben Sie dem
.form-group
Element die Klasse von.has-feedback
und dem Symbol die Klasse von.form-control-feedback
.Das einfachste Beispiel wäre ungefähr so:
Vorteile :
Nachteile :
Um die Nachteile zu überwinden, habe ich diese Pull-Anfrage 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 heute benötigen , finden Sie hier eine einfache Implementierungsanleitung:
Fügen Sie einfach diese Formularänderungen in CSS ein (auch über ein verstecktes Stack-Snippet unten eingefügt). * WENIGER : Wenn Sie alternativ über weniger erstellen , sind hier die Formularänderungen in weniger
Dann müssen Sie nur noch die Klasse
.has-feedback-left
in eine Gruppe mit der Klasse aufnehmen.has-feedback
, um das Symbol nach links 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, auf der der richtige HTML-Satz für jede Permutation zusammen mit einer Live-Demo angezeigt wird.
Hier ist eine Demo in Plunker
Haben Sie nicht gefunden, wonach Sie gesucht haben ? Versuchen Sie diese ähnlichen Fragen:
Zusätzliches CSS für linksbündige Feedback-Symbole
Code-Snippet anzeigen
quelle
.focusedInput
Klasse wird definiert , nach.input-group-addon
so , wenn der Style Sheets Cascade nach unten, wobei die letzteren Arten Vorrang haben sollten. Können Sie das Szenario besser beschreiben, das zu diesem Problem geführt hat?<i class="icon-user"></i>
zu<i class="fa fa-user"></i>
. Wenn Sie über das Aktualisieren externer Bibliotheken nachdenken, lesen Sie unbedingt die Versionshinweise und die neue Dokumentation, um festzustellen, ob Ihre App noch kompatibel ist oder aktualisiert werden muss.Die offizielle Methode. Kein benutzerdefiniertes CSS erforderlich:
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
quelle
{left:0}
zur Glyphicon-Klasse sollte auf die Ausrichtung nach links achten. jsfiddle.net/LS2Ek/30 . Ich mag Ihren Outline + Box-Shadow-Ansatz. Sieht ordentlich aus!left:0
Identifiziert in einem Inline-Formular den Beginn der Eingabe nicht mehr. Außerdem müssen Sie links neben der Eingabe eine Auffüllung hinzufügen und diese rechts entfernen. Trotzdem eine sehr schöne und saubere Lösung. Ich denke, das Identifizieren der linken Seite der Eingabe ist der schwierige Teil, bei dem ein Wrapper mitposition:relative
nützlich ist.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
CSS
quelle
So habe ich es gemacht, indem ich nur das Standard-Bootstrap-CSS v3.3.1 verwendet habe:
Und so sieht es aus:
quelle
Dieser 'Cheat' funktioniert mit dem Nebeneffekt, dass die Glyphicon-Klasse die Schriftart für das Eingabesteuerelement ändert.
Geige
Wenn Sie den Nebeneffekt beseitigen möchten, können Sie die "Glyphicon" -Klasse entfernen und das folgende CSS hinzufügen (Es gibt möglicherweise eine bessere Möglichkeit, das Platzhalter-Pseudoelement zu formatieren, und ich habe es nur in Chrome getestet).
Geige
Möglicherweise eine noch sauberere Lösung:
Geige
CSS
HTML
quelle
Dies kann mit Klassen aus der offiziellen Bootstrap 3.x-Version ohne benutzerdefiniertes CSS erfolgen.
Verwenden Sie
input-group-addon
vor dem Eingangs - Tag, innerhalb voninput-group
dann eine der glyphicons verwenden, hier ist der CodeHier ist die Ausgabe
Um es weiter anzupassen, fügen Sie Ihrer eigenen custom.css-Datei ein paar Zeilen benutzerdefiniertes CSS hinzu (passen Sie die Auffüllung bei Bedarf an).
Wenn Sie den Hintergrund des
input-group-addon
Eingabeträgers transparent machen und den linken Farbverlauf des Eingabe-Tags auf Null setzen, wird die Eingabe nahtlos angezeigt. Hier ist die angepasste AusgabeHier ist ein jsbin- Beispiel
Dies löst die benutzerdefinierten CSS-Probleme der Überlappung mit Beschriftungen, der Ausrichtung während der Verwendung
input-lg
und der Konzentration auf Registerkartenprobleme.quelle
Hier ist eine Nicht-Bootstrap-Lösung, die Ihr Markup einfach hält, indem die Bilddarstellung des Glyphikons mithilfe der base64-URI-Codierung direkt in das CSS eingebettet wird.
quelle
Wenn Sie Fontawesome verwenden , können Sie dies tun:
Ergebnis
Die vollständige Liste der Unicodes finden Sie in der Symbolreferenz The complete Font Awesome 4.6.3
quelle
quelle
Hier ist eine andere Möglichkeit, indem Sie das Glyphikon mit dem platzieren
:before
in CSS zu platzieren.Arbeitsdemo in jsFiddle
Für diesen HTML:
Verwenden Sie dieses CSS ( Bootstrap 3.x- und Webkit-basierte Browser kompatibel )
Wie @Frizi sagte, müssen wir hinzufügen
pointer-events: none;
damit der Cursor den Eingabefokus nicht stört. Alle anderen CSS-Regeln dienen zum Zentrieren und Hinzufügen des richtigen Abstands.Das Ergebnis:
quelle
Sie können den Unicode-HTML-Code verwenden
Um ein Benutzersymbol hinzuzufügen

, fügen Sie einfach das hinzuplaceholder
Sie es Attribut hinzu oder wo immer Sie es möchten.Vielleicht möchten Sie diesen Spickzettel überprüfen .
Beispiel:
quelle
Ich habe auch eine Entscheidung für diesen Fall mit Bootstrap 3.3.5:
Bei der Eingabe habe ich so etwas:
quelle
Getestet mit Bootstrap 4.
Nimm ein
form-control
und fügeis-valid
es seiner Klasse hinzu. Beachten Sie, wie das Steuerelement grün wird. Beachten Sie jedoch, dass das Häkchensymbol rechts neben dem Steuerelement angezeigt wird. Das wollen wir!Beispiel:
quelle
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 so angepasst werden, dass Sie mehr Abstand für die Eingabe [Typ = Nummer] zulassen, um den Eingabespinner aufzunehmen, oder ihn links vom Griff verschieben können.
http://codepen.io/anon/pen/RPRmNq?editors=110
quelle
Sie sollten dies mit vorhandenen Bootstrap-Klassen und einem kleinen benutzerdefinierten Stil tun können.
Bearbeiten Das Symbol wird über die
icon-user
Klasse referenziert . Diese Antwort wurde zum Zeitpunkt der Bootstrap-Version 2 geschrieben. Die Referenz finden Sie auf der folgenden Seite: http://getbootstrap.com/2.3.2/base-css.html#imagesquelle