Html CSS：如何在输入元素后添加图标/图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22992827/
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
CSS: How to add icon/image after input element
提问by Alex
I'm creating an HTML form and want it to display icons after the input fields whenever the data inside them has changed, and I'm struggling to find the right way to do this through CSS. I currently have the following class:
我正在创建一个 HTML 表单，并希望它在输入字段中的数据发生更改时在输入字段之后显示图标，并且我正在努力通过 CSS 找到正确的方法来做到这一点。我目前有以下课程：
.ChangedInput
{
border: 2px solid green;
}
.ChangedInput:after
{
content:url('/Images/icons/table_edit.png');
}
And this is my input element:
这是我的输入元素：
<input type="text" name="DetailedDescription" size="160" class="ChangedInput" />
The green line is correctly applied as border, but I would expect teh table_edit.png icon to appear after the input element, alas it is not...
绿线正确应用为边框，但我希望 table_edit.png 图标出现在输入元素之后，唉，它不是......
Here's a JSFiddle showing what I'm trying to accomplish: http://jsfiddle.net/8Hh8L/
这是一个 JSFiddle，显示了我要完成的任务：http: //jsfiddle.net/8Hh8L/
EDIT: I should have stated that I want to apply this icon to a set of existing forms, and it would be a pain to go through all of them and change the input elements. So I'm looking for a solution which allows me to apply this to an existing input element. Using Javascript/Jquery if need be...
编辑：我应该声明我想将此图标应用于一组现有表单，并且遍历所有表单并更改输入元素会很痛苦。所以我正在寻找一种解决方案，它允许我将其应用于现有的输入元素。如果需要，使用 Javascript/Jquery...
回答by Albzi
回答by iMarkDesigns
Wrap a fieldset over span + input. Something like this.
将字段集包装在跨度 + 输入上。像这样的东西。
<fieldset>
<input type="text" name="table-edit" placeholder="You Text Here..." />
<span class="icon-table-edit"></span>
</fieldset>
and then the CSS...
然后CSS ...
fieldset { position: relative; }
input { border: 2px solid green; }
span.icon-table-edit { position: absolute; right: 0; top: 0; background: url("your-image-path.jpg") no-repeat; }
...apply some width and height to the span, and adjust the top if necessary. Hope this help...
...应用一些宽度和高度到跨度，并在必要时调整顶部。希望这有助于...
回答by Salil Sharma
This worked in may case
这在可能的情况下有效
input {
background: white url(./calendar.svg) right no-repeat; /*Your Image Link*/
padding-right: 17px;
}
