html - 在文本字段中放置图像

Question

我有一个这样的 HTML 输入字段。我想在右侧的文本框中放置一个图像。有人可以帮我解决它的 CSS 问题吗？

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

图中是文本字段电子邮件地址内的图像，这就是我想要的。你是怎么做到的？

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 }

工作演示

http://jsfiddle.net/HnJZa/