Place an image inside a text field

Question

I have an HTML input field like this. I would like to place an image inside the textbox on the right side. Can someone help me out with its CSS for that?

Answer 1

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

Answer 2

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

Answer 3

try:

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

Answer 4

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/

Answer 5

try this:

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

Answer 6

Use background-image and background-position property

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;

}