将图像放在文本字段内 [英] Place an image inside a text field

问题描述

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

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?

推荐答案

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/

这篇关于将图像放在文本字段内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！