Fügen Sie das Symbol in einem Formular in das Eingabeelement ein

270

Wie füge ich ein Symbol in das Eingabeelement eines Formulars ein?

Screenshot eines Webformulars mit drei Eingaben, die Symbole enthalten

Live-Version unter: Tidal Force-Thema

akif
quelle
2
@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:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
Dan Lew
quelle
2
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.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

Nicht so "sauber", sollte aber auf älteren Browsern funktionieren.

Harpo
quelle
2
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?
Jonhue
35

Eine Lösung ohne Hintergrundbilder:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

Majid Savalanpour
quelle
34

Sie können dies versuchen:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}
Alan Haggai Alavi
quelle
26

Ich finde das die beste und sauberste Lösung dafür. Verwenden eines Texteinzugs für das inputElement

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
Rost
quelle
3
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.

  1. Erstellen Sie den Container um die Eingabe und das Symbol.
  2. Stellen Sie die Containerposition als relativ ein
  3. Stellen Sie das Symbol als absolute Position ein. Dadurch wird das Symbol relativ zum umgebenden Container positioniert.
  4. Verwenden Sie entweder oben, links, unten, rechts, um das Symbol im Container zu positionieren.
  5. Stellen Sie den Abstand innerhalb der Eingabe so ein, dass der Text das Symbol nicht überlappt.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}
<div id="input-container">
  <img/>
  <input/>
</div>

Ryan Forte
quelle
1
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.
Der Narr
8
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

Fügen Sie die obigen Tags zu Ihrer CSS-Datei hinzu und verwenden Sie die angegebene Klasse.

Rafi Haidari
quelle
6

Das funktioniert bei mir:

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: 20px 20px;
   background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

Gxzzin
quelle
Das Bild verschwindet bei der automatischen Vervollständigung auf Chrom
Neptun
Wie macht man das Bild anklickbar, zB wenn man ein "Speichern" -Symbol verwendet?
user460114
Für meine Hybrid-App hat es bei mir funktioniert. Ich habe nur das gesamte Eingabefeld nach dem Einfügen des Bildes anklickbar gemacht.
Shivam Srivastava
5

Sie können dies versuchen: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>





Hasan
quelle
4

Verwenden Sie einfach die Hintergrundeigenschaft in Ihrem CSS.

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}
Dan Walker
quelle
4

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.

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

Lösung für meinen Fall war:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

Nur zu erwähnen, border, paddingund text-alignEigenschaften sind für die Lösung nicht wichtig. Ich habe gerade meinen ursprünglichen Code repliziert.

Fantja
quelle
1
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).
Borbulon
3

Verwendung mit Schriftart-Symbol

<input name="foo" type="text" placeholder="&#61447;">

ODER

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}
Ali Göksel Bektaş
quelle
7
Scheint, dass :: before nicht auf das Eingabeelement angewendet werden kann.
Vishnja
1
 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

Zum Beispiel können Sie Folgendes verwenden: Beschriftung mit versteckter Eingabe (Symbol ist vorhanden).

Yazabara
quelle
1

Verwenden Sie diese CSS-Klasse zu Beginn für Ihre Eingabe und passen Sie sie dann entsprechend an:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">

csandreas1
quelle
Wissen Sie, wie Sie das Klickereignis nur für dieses Bild festlegen?
Arjun
0

Dies funktioniert bei mir für mehr oder weniger Standardformulare:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
Yan D.
quelle