将图标放在表单中的输入元素内(而不是背景图像!)

Question

我想完全按照这里要求做的事情:

将图标放在表单中的input元素内

除了我希望图标右对齐.

"背景"解决方法不起作用,因为这些图像必须是可点击的!所以一定是IMG.

我怎样才能做到这一点？

Answer 1

没有背景图像的解决方案:

的jsfiddle.

#input_container { 
    position:relative;
    padding:0;
    margin:0;
}
#input { 
    height:20px;
    margin:0;
    padding-left:30px;
}
#input_img {
    position:absolute;
    bottom:8px;
    left:10px;
    width:10px;
    height:10px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn1.iconfinder.com/data/icons/CornerStone/PNG/arrow%20right.png" id="input_img">
</div>

Answer 2

您可以使用div作为包装器,包含图像和输入字段,并将图像放置在那里,使用绝对位置覆盖输入字段.

HTML

<div>
    <img src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" alt="">
    <input type="text">
</div>

CSS

div {
    height:30px;
    width:300px;
    position:relative;
}

img {
    height:15px;
    position:absolute;
    right:0;
    top:5px;
}

input {
    width:100%;
}

小提琴

http://jsfiddle.net/aTvvN/1/