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?

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

In the picture is an image which is inside the text field email address, which is what I want. How do you do this?

Answer 1

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/