Html 将图标放在表单中的输入元素内（不是作为背景图像！）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20634868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put icon inside input element in a form (not as background image!)
提问by John Smith
I want to do exactly what was asked here:
我想完全按照这里的要求做：
Put icon inside input element in a form
Except that I want the icons to be right-aligned.
除了我希望图标右对齐。
The "background" workaround won't work, since those images have to be clickable! So it must be an IMG.
“背景”解决方法不起作用，因为这些图像必须是可点击的！所以它必须是一个IMG。
How can I do this?
我怎样才能做到这一点？
回答by display-name-is-missing
A solution without background-images:
没有背景图像的解决方案：
#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>回答by koningdavid
You can use a div as a wrapper, containing an image and input field, and position the image inside there that overlay's the input field using position absolute.
您可以使用 div 作为包装器，包含图像和输入字段，并使用绝对位置将图像定位在覆盖输入字段的那里。
HTML
HTML
<div>
<img src="http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg" alt="">
<input type="text">
</div>
CSS
CSS
div {
height:30px;
width:300px;
position:relative;
}
img {
height:15px;
position:absolute;
right:0;
top:5px;
}
input {
width:100%;
}
FIDDLE
小提琴
回答by Parixit
Just try following:
只需尝试以下操作：
HTML:
HTML：
<input type="text" />
<img src='http://jsfiddle.net/img/initializing.png' />
CSS:
CSS：
input {
border:1px solid #ddd;
border-right:none;
float: left;
}
input:focus {
outline:none;
}
img {
float: left;
height: 18px;
width: 19px;
border: 1px solid #ddd;
border-left: none;
margin: 2px 0px 0px -2px;
}
