如何将图标放置到每个jQueryUIAutoComplete，而无需javascript注入任何元素

我遇到了一个问题，我有一个大型项目，有一个全局的

css

，我想在每个

autocomplete

中放置

icon

，以便为用户提供线索

它应该像下面的一样：

。图标：之前{
位置：相对位置；
内容：“五”；
颜色：红色；
右：17px；
}

搜索：

如果您可以编辑HTML，您可以使用

标签包装输入内容

您不需要for/id，然后可以使用after

：：after

只能用于容器元素（关闭的元素） 例如，

和

不能通过css在

之后有
：：

示例


标签{
位置：相对位置；
}
标签：后{
位置：绝对位置；
右：5px；
顶部：0px；
内容：“V”；
颜色：红色；
}
搜索：

注意：
我不能用javascript或jquery全局地将其注入到每个
自动完成
。只有css，我
必须达到预期的结果

好的，但是您至少可以向
自动完成
字段/
输入
的直接父级添加一个自定义类（名称）

请参见下文，我在
输入
容器中添加了
标记包装
类


.icon:before，
.标签包装：之后{
位置：相对位置；
内容：“五”；
颜色：红色；
右：17px；
}
/*.tags包装中不应有.icon；但以防万一*/
.tags wrap.icon:before{
显示：无；
}

搜索：
搜索：
搜索：
搜索：
搜索：
伪元素，如
：after
，
：before
不能与输入元素一起使用。它可以与具有子元素的容器元素一起使用

因此，您可以在输入之前使用带有
标签的伪元素。由于所有
标签
和
输入
的宽度不同，您可以使用
输入
中的第一个图标，而不是最后一个


$（函数（）{
var availableTags=[
“约翰”，
“凯尔”，
“康普顿”，
“约旦”，
“迈克尔”，
“彼得”
];
$（“.tags”）.autocomplete({
资料来源：availableTags
});
});
.ui小部件{
边缘顶部：20px；
}
.向右浮动{
浮动：对；
}
.向左浮动{
浮动：左；
}
.图标：之前{
位置：相对位置；
内容：“五”；
颜色：红色；
右：17px；
}
/*试试下面的元素*/
.ui小部件标签：：之后{
颜色：红色；
内容：“五”；
利润率：3倍0.4倍；
位置：绝对位置；
}
.ui自动完成输入{
左侧填充：18px；
}

相同的结果，图标没有任何跨度
搜索：
搜索：
搜索：
搜索：
搜索：
搜索：
如果您只想在文本框中添加一个图标，为用户提供线索，我建议添加一个背景图像作为图标来实现


input.ui-autocomplete-input{
背景：url（“http://icons.iconarchive.com/icons/custom-icon-design/mini-4/48/paper-plane-icon.png）右4px中心不重复；
背景尺寸：自动80%；
边框：1px实心；
填充：4px24px 4px；
}












我不想用标签包装每个输入，因为我的项目有1000多个输入。“我做不到我想做的吗？”@skBangalore好吧，在这种情况下，我看不出用纯CSS做这件事的任何方法。如果你问我如何才能在1000个输入中添加图标，答案是。如果您问如何在不添加任何HTML的情况下添加图标，即在输入中添加伪元素，答案是。尽管如此，在（图标）
之后添加
1000
次
，这是一个不错的解决方案。请发布您的解决方案！！！实际上，只有当父/容器只包含一对
自动完成
输入及其标签（“搜索：”文本）时，这才有效-这里有一个输入失败：。。。