CSS:如何在输入元素后添加图标/图像

Question

我正在创建一个HTML表单,并希望它在输入字段之后显示图标,只要它们内部的数据发生了变化,我就很难通过CSS找到正确的方法.我目前有以下课程:

.ChangedInput
{
    border: 2px solid green;
}

.ChangedInput:after
{
    content:url('/Images/icons/table_edit.png');
}

这是我的输入元素:

<input type="text" name="DetailedDescription" size="160" class="ChangedInput" />

绿线正确应用为边框,但我希望teh table_edit.png图标出现在输入元素之后,唉它不是......

这是一个JSFiddle,展示了我想要实现的目标:http: //jsfiddle.net/8Hh8L/

编辑:我应该说我想将这个图标应用于一组现有的表单,并且通过所有表单并更改输入元素将是一件痛苦的事.所以我正在寻找一种解决方案,允许我将其应用于现有的输入元素.如果需要,使用Javascript/Jquery ...

Answer 1

小提琴

input不能有::before或::after元素.尝试环绕<span>输入并执行span:after

或者只是使用一个img元素,因为这也可以.