@IvanSokalskiy Das setzt voraus, dass jemand Bootstrap verwendet. Nicht jeder, der darauf stößt, wird Bootstrap verwenden!
Barry Michael Doyle
Antworten:
391
Die von Ihnen verlinkte Site verwendet eine Kombination von CSS-Tricks, um dies zu erreichen. Zunächst wird ein Hintergrundbild für das <input>Element verwendet. Um den Cursor zu bewegen, wird er verwendet padding-left.
Mit anderen Worten, sie haben diese beiden CSS-Regeln:
Könnten Sie bitte mehr über die oberen und linken Parameter (7px 7 px) und andere Attribute beschreiben? Das muss hilfreich sein.
QMaster
262
Hinweis: Verwenden Sie IE 8 nicht mehr und unterstützen Sie es nicht mehr.
Ein Codierer
3
Wie kann ich das Bild am rechten Ende des Eingabefelds ausrichten?
Ishanbakshi
3
Das Problem mit Hintergrundbildern ist, dass das automatische Ausfüllen von Chrome das Hintergrundbild entfernt und den Hintergrund vollständig gelb macht
Cătălin Rădoi
1
Um sich nach rechts auszurichten, verwenden Sie: Hintergrundposition: rechts;
Existenzberechtigung
52
Die von anderen veröffentlichten CSS-Lösungen sind der beste Weg, dies zu erreichen.
Wenn dies zu Problemen führen sollte (siehe IE6), können Sie auch eine randlose Eingabe innerhalb eines div verwenden.
eine gute Ergänzung zu dieser Antwort. manchmal dh gibt Probleme und dies ist ein guter Weg, um eines von ihnen zu lösen. arbeitete für mich, wenn auch mit einer Spanne.
Ross
Gute Möglichkeit, komplexere Strukturen in Eingaben hinzuzufügen!
Jonhue
@jonhue, ich würde dies nicht empfehlen, es sei denn, Sie leben noch im letzten Jahrzehnt und müssen IE6 unterstützen. Selbst dann würde ich es nicht "sauber" nennen.
Harpo
@harpo Wie würden Sie dann Links in Eingaben einfügen?
Ich unterstütze den Einzug von Text, da das Auffüllen nach links die Feldbreite erhöht und aus dem übergeordneten Element überläuft.
Kostiantyn
1
Warum haben Sie den Stil inline anstatt in das #icon css eingefügt?
Wylliam Judd
@WylliamJudd Das ist nur zu Demonstrationszwecken :)
Rust
Warum hast du id anstelle von class verwendet?
Majid Savalanpour
9
Eine einfache Möglichkeit, ein Symbol innerhalb einer Eingabe zu positionieren, besteht darin, die CSS-Eigenschaft position zu verwenden, wie im folgenden Code gezeigt. Hinweis: Ich habe den Code aus Gründen der Übersichtlichkeit vereinfacht.
Erstellen Sie den Container um die Eingabe und das Symbol.
Stellen Sie die Containerposition als relativ ein
Stellen Sie das Symbol als absolute Position ein. Dadurch wird das Symbol relativ zum umgebenden Container positioniert.
Verwenden Sie entweder oben, links, unten, rechts, um das Symbol im Container zu positionieren.
Stellen Sie den Abstand innerhalb der Eingabe so ein, dass der Text das Symbol nicht überlappt.
Sauber und einfach, ja. Sie sollten auch den Eingaberand mit entfernen input { border: none; }und den Rand hinzufügen #input-container { border: 1px solid #000; }, damit er so aussieht, als ob sich das Bild im Inneren befindet und tatsächlich Teil der Eingabe ist.
Mario Werner
1
@MarioWerner er schob das Bild in die Eingabe, keine Notwendigkeit, Border-Hacks zu machen, das ist das Schöne. Ich werde die Idee nutzen.
input.valid {border-color:#28a745;padding-right:30px;background-image:url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');background-repeat: no-repeat;background-size:20px20px;background-position: right center;}
Ich hatte eine solche Situation. Es hat wegen nicht funktioniert background: #ebebeb;. Ich wollte Hintergrund in das Eingabefeld einfügen und diese Eigenschaft wurde ständig oben im Hintergrundbild angezeigt, und ich konnte das Bild nicht sehen! Also habe ich das backgroundGrundstück so verschoben , dass es über dem background-imageGrundstück liegt, und es hat funktioniert.
Das ist super alt und ich hoffe, Sie haben es vielleicht seit über einem Jahr gelernt, aber es backgroundist ein Kurznamen für Eigenschaften, mit dem Sie alle Hintergrundeigenschaften gleichzeitig abdecken: background: [color] [image url] [repeat] [position]und deshalb hat Ihre Farbe alles überschrieben. Sie hätten es auch an Ort und Stelle lassen und das Anwesen inbackground-color
Borbulon
@borbulon ja du hast recht Es ist fast immer am besten, den Kurznamen der Eigenschaft zu verwenden. Stimmen Sie dem vollkommen zu. In diesem Beitrag soll jedoch darauf hingewiesen werden, dass die Reihenfolge der Eigenschaften manchmal von Bedeutung ist und dass diese „kleinen“ CSS-Regeln sehr frustrierend sein können, insbesondere für Neulinge in der Entwicklung.
Fantja
1
Stimme voll und ganz zu, aber der Punkt bleibt bestehen: backgroundist eine Abkürzung für den Eigenschaftsnamen. Eine bessere Lösung wäre gewesen, nicht die Kurzschrift, sondern background-colordie Farbeigenschaft zu verwenden (vorausgesetzt, Sie möchten sowohl eine Farbe als auch ein Bild).
Antworten:
Die von Ihnen verlinkte Site verwendet eine Kombination von CSS-Tricks, um dies zu erreichen. Zunächst wird ein Hintergrundbild für das
<input>
Element verwendet. Um den Cursor zu bewegen, wird er verwendetpadding-left
.Mit anderen Worten, sie haben diese beiden CSS-Regeln:
quelle
Die von anderen veröffentlichten CSS-Lösungen sind der beste Weg, dies zu erreichen.
Wenn dies zu Problemen führen sollte (siehe IE6), können Sie auch eine randlose Eingabe innerhalb eines div verwenden.
Nicht so "sauber", sollte aber auf älteren Browsern funktionieren.
quelle
Eine Lösung ohne Hintergrundbilder:
quelle
Sie können dies versuchen:
quelle
Ich finde das die beste und sauberste Lösung dafür. Verwenden eines Texteinzugs für das
input
ElementCSS:
HTML:
quelle
Eine einfache Möglichkeit, ein Symbol innerhalb einer Eingabe zu positionieren, besteht darin, die CSS-Eigenschaft position zu verwenden, wie im folgenden Code gezeigt. Hinweis: Ich habe den Code aus Gründen der Übersichtlichkeit vereinfacht.
quelle
input { border: none; }
und den Rand hinzufügen#input-container { border: 1px solid #000; }
, damit er so aussieht, als ob sich das Bild im Inneren befindet und tatsächlich Teil der Eingabe ist.Fügen Sie die obigen Tags zu Ihrer CSS-Datei hinzu und verwenden Sie die angegebene Klasse.
quelle
Das funktioniert bei mir:
quelle
Sie können dies versuchen: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
quelle
Verwenden Sie einfach die Hintergrundeigenschaft in Ihrem CSS.
quelle
Ich hatte eine solche Situation. Es hat wegen nicht funktioniert
background: #ebebeb;
. Ich wollte Hintergrund in das Eingabefeld einfügen und diese Eigenschaft wurde ständig oben im Hintergrundbild angezeigt, und ich konnte das Bild nicht sehen! Also habe ich dasbackground
Grundstück so verschoben , dass es über dembackground-image
Grundstück liegt, und es hat funktioniert.Lösung für meinen Fall war:
Nur zu erwähnen,
border
,padding
undtext-align
Eigenschaften sind für die Lösung nicht wichtig. Ich habe gerade meinen ursprünglichen Code repliziert.quelle
background
ist ein Kurznamen für Eigenschaften, mit dem Sie alle Hintergrundeigenschaften gleichzeitig abdecken:background: [color] [image url] [repeat] [position]
und deshalb hat Ihre Farbe alles überschrieben. Sie hätten es auch an Ort und Stelle lassen und das Anwesen inbackground-color
background
ist eine Abkürzung für den Eigenschaftsnamen. Eine bessere Lösung wäre gewesen, nicht die Kurzschrift, sondernbackground-color
die Farbeigenschaft zu verwenden (vorausgesetzt, Sie möchten sowohl eine Farbe als auch ein Bild).Verwendung mit Schriftart-Symbol
ODER
quelle
Zum Beispiel können Sie Folgendes verwenden: Beschriftung mit versteckter Eingabe (Symbol ist vorhanden).
quelle
Verwenden Sie diese CSS-Klasse zu Beginn für Ihre Eingabe und passen Sie sie dann entsprechend an:
quelle
Dies funktioniert bei mir für mehr oder weniger Standardformulare:
quelle