Platzieren Sie ein Bild in ein Textfeld

Question

Ich habe ein HTML-Eingabefeld wie folgt. Ich möchte ein Bild in das Textfeld auf der rechten Seite platzieren. Kann mir jemand dafür mit seinem CSS helfen?

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

Auf dem Bild ist ein Bild, das in dem Textfeld E-Mail-Adresse ist, das ist, was ich will. Wie machst Du das?

Answer 1

HTML

CSS

.fake-input { position: relative; width:240px; } 
.fake-input input { border:none: background:#fff; display:block; width: 100%; box-sizing: border-box } 
.fake-input img { position: absolute; top: 2px; right: 5px } 

Arbeiten Demo

http://jsfiddle.net/HnJZa/

Answer 2

Sie so etwas wie dieses

.textBox{ 
background-image:url(iconimage.jpg); 
background-position:right; 
background-repeat:no-repeat; 
padding-left:17px; 
} 

Dann wenden Sie diesen Stil in Ihr Textfeld versuchen:

<input type="text" class="textBox" /> 

Answer 3

Sie Klasse Ihrem Eingang hinzufügen

<input type="text" id="name" class="inputImage" /> 

und dann Hintergrund Bild zu Klasse in css

.inputImage 
{ 
background:#FFFFFF url('img.jpg') no-repeat top right; 
} 

Answer 4

Sie benötigen Klasse wie folgt hinzuzufügen:

CSS:

.bgInput { 
    background: url(path of your image.jpg) top right no-repeat; 
} 

HTML:

<input type="text" class="bgInput" id="name"/> 

Answer 5

Eine kleine Antwort: Sie können dies tun, indem sie als Hintergrundbild des Eingabefeldes zu setzen.

Answer 6

Versuch:

#name { 
     background: url('path/image.png') right no-repeat; 
} 

Answer 7

versuchen Sie dies:

input { 
    background-image: url("icon.png"); 
    background-position: right top; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

Answer 8

Verwenden Hintergrund-Bild und Hintergrund-Eigenschaft position

DEMO

CSS:

input { 
    height: 70px; 
    width: 200px; 
    background-image:url("http://cloud.ohloh.net/attachments/25869/plone-icon-64_med.png"); 
    background-repeat:no-repeat; 
    background-position: 133px 3px; 

} 

Answer 9

.text3 { 
 
\t width: 300px; 
 
\t height: 30px; 
 
} 
 

 
#text3 { 
 
\t background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png); 
 
\t background-size: 30px; 
 
\t background-repeat: no-repeat; 
 
} 
 

 
input { 
 
\t text-align: center; 
 
}

<p class="email"> 
 
\t \t \t Email 
 
</p> 
 
<input type="text" placeholder="Email_ID" class="text3" id="text3">

Answer 10

Die Antworten oben replizieren nicht das Format, in dem Bild Fragesteller gezeigt, oder eine Erklärung liefern. Dies ist eine Lösung, die Hintergrundbilder verwendet.

Erläuterung der Hintergrundbildsyntax.

background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white; 

• Lage image: url ('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png')
• Bild zeigt einmal: no-repeat
• Abstand von links: 97,25%
• Entfernung von oben: 10px
• Hintergrund Farbe: weiß

.bg-email-icon { 
 
    background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white; 
 
    padding-left: 5px; 
 
    padding-right: 50px; 
 
    width: 255px; 
 
    height: 30px; 
 
    border: 1px gray solid; 
 
    border-radius: 5px 5px 0px 0px; 
 
} 
 

 
.bg-lock-icon { 
 
    background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white; 
 
    padding-left: 5px; 
 
    padding-right: 50px; 
 
    width: 255px; 
 
    height: 30px; 
 
    border: 1px gray solid; 
 
    border-top-width: 0px; 
 
    border-radius: 0px 0px 5px 5px; 
 
}

<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email"> 
 
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">