Geek Answers Handbook

Put the image in the text box

I have an HTML input box like this. I would like to place the image inside the text box on the right side. Can someone help me with his CSS for this?

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

The image shows the image that is inside the text box of the email address, which is what I want. How do you do this?

+16
html css image
source share
10 answers

HTML

 <div class="fake-input"> <input type="text" /> <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 /> </div>

CSS

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

Working demo

http://jsfiddle.net/HnJZa/

+17
source share

try the following:

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

you can try something like this

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

Then apply this style to your text box:

 <input type="text" class="textBox" />
+4
source share

Use background-image property and background-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; }
+3
source share

 .text3 { width: 300px; height: 30px; } #text3 { background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png); background-size: 30px; background-repeat: no-repeat; } input { text-align: center; } 
 <p class="email"> Email </p> <input type="text" placeholder="Email_ID" class="text3" id="text3">
+1
source share

The answers above did not reproduce the format shown in the image of the questionnaires, or did not provide any explanation. This is a solution using background images.

Background image syntax explanation.

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

 .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">
+1
source share

You can add a class to enter

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

and then the background image to a class in css

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

You need to add the class as follows:

CSS

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

HTML:

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

Short answer: you can do this by setting the background image of the input field.

0
source share

try:

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

More articles:


All Articles