Setzen Sie das Symbol innerhalb des Eingabeelements in ein Formular

Question

Wie lege ich ein Symbol in das Eingabeelement eines Formulars?

Live-Version auf: Tidal Force theme

Answer 1

Die Website Sie eine Kombination von CSS Tricks verknüpft nutzt diese aus zu ziehen. Zunächst wird ein Hintergrundbild für das Element <input> verwendet. Um den Cursor dann zu bewegen, verwendet er 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; 

Answer 2

einfach die Hintergrundeigenschaft in Ihrem CSS verwenden.

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

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

Answer 3

Sie können dies versuchen:

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

Answer 4

Die CSS-Lösungen von anderen geschrieben sind der beste Weg, dies zu erreichen.

Wenn das irgendwelche Probleme geben sollte (lesen 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.

Answer 5

.icon{ 
background: url(1.jpg) no-repeat; 
padding-left:25px; 
} 

Fügen Sie die obigen Tags in Ihre CSS-Datei ein und verwenden Sie die angegebene Klasse.

Answer 6

Ich finde dies die beste und sauberste Lösung. Mit text-indent auf dem input Element

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

Answer 7

<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 diese verwenden: label mit verstecktem Eingang (Symbol vorhanden ist,).

Answer 8

Eine Lösung ohne Hintergrund-Bilder:

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

Answer 9

Verwendung mit font-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";  
}