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

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

Live-Version unter: Tidal Force-Thema

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;

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.

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>

Sie können dies versuchen:

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

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

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>

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

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>

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>

Verwenden Sie einfach die Hintergrundeigenschaft in Ihrem CSS.

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

#foo
{
    background: url(/img/foo.png);
}

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.

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

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

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

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>