如何在每个jqueryui自动完成中放置图标，而不需要javascript注入任何元素

Question

我遇到了一个问题，我有一个大项目有全局css和这个css，我想把icon放在每个autocomplete上，这样它就可以为用户提供线索

应该如下所示：

.icon:before{
position: relative;
content: "V";
color: red;
right: 17px;
}

<div>
<label for="tags">Search: </label>
<input class="tags">
<span class="icon"></span>
</div>

注意：<span class="icon"></span>，我不能用javascript或jquery全局注入到每个autocomplete。使用css，我只需要实现所需的结果

下面是我实现上述预期结果的样本元素：

JSF编号：http://jsfiddle.net/cS2bL/66/(工作(

$(function() {
var availableTags = [
"john",
"khair",
"compton",
"Jordan",
"Micheal",
"Peter"
];
$( ".tags" ).autocomplete({
source: availableTags
});
});

.ui-widget{
margin-top: 20px;
}
.float-right{
float: right;
}
.float-left{
float: left;
}
.icon:before{
position: relative;
content: "V";
color: red;
right: 17px;
}
/* tried for below element */
.ui-autocomplete-input:after{
position: absolute;
content: 'V';
color:red;

}
/* tried for above element */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags">
</div>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" style="width:130px;">
</div>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" style="width:140px;">
<label for="tags">Search: </label>
<input class="tags" style="width:100px;">
</div>
<div class="floated-elements ui-widget">
<div class="float-right">
<label for="tags">Search: </label>
<input class="tags" style="width:300px;">
</div>

<div class="float-left">
<label for="tags">Search: </label>
<input class="tags" style="width:50px;">
</div>
</div>

请提前帮我谢谢！！

Answer 1

像:after、:before这样的伪元素不能与输入元素一起使用。它可以与可以具有子级的容器元素一起使用。

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

$(function() {
var availableTags = [
"john",
"khair",
"compton",
"Jordan",
"Micheal",
"Peter"
];
$(".tags").autocomplete({
source: availableTags
});
});

.ui-widget {
margin-top: 20px;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.icon:before {
position: relative;
content: "V";
color: red;
right: 17px;
}
/* try below element */
.ui-widget label::after {
color: red;
content: "V";
margin: 3px 0 0 4px;
position: absolute;
}
.ui-autocomplete-input {
padding-left: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.3/jquery-ui.css">
<h1>
Same result without any span for icon
</h1>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags">
</div>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" style="width:130px;">
</div>
<div class="ui-widget">
<label for="tags">Search: </label>
<input class="tags" style="width:140px;">
<label for="tags">Search: </label>
<input class="tags" style="width:100px;">
</div>
<div class="floated-elements ui-widget">
<div class="float-right">
<label for="tags">Search: </label>
<input class="tags" style="width:300px;">
</div>
<div class="float-left">
<label for="tags">Search: </label>
<input class="tags" style="width:50px;">
</div>
</div>

Answer 2

注意：<span class="icon"></span>，我不能用javascript或jquery全局注入到每个autocomplete。只有css i必须达到所需的结果

可以，但您至少可以将自定义类(名称(添加到autocomplete字段/input的立即父级？？

请参阅下面我将tags-wrap类添加到input容器中的部分。

.icon:before,
.tags-wrap:after{
position: relative;
content: "V";
color: red;
right: 17px;
}
/* There should be no .icon in a .tags-wrap; but just in case.. */
.tags-wrap .icon:before {
display: none;
}

<div class="tags-wrap">
<label for="tags">Search: </label>
<input class="tags">
<!-- This shouldn't be here; but just for the demo purposes... -->
<span class="icon"></span>
</div>
<div class="tags-wrap">
<label for="tags">Search: </label>
<input class="tags">
<!-- No .icon here -->
</div>
<div class="foo">
<!-- Add the 'tags-wrap' class to the input's immediate parent -->
<span class="tags-wrap">
<label for="tags">Search: </label>
<input class="tags">
</span>
</div>
<!-- Inline tests -->
<span class="tags-wrap">
<label for="tags">Search: </label>
<input class="tags">
</span>
<span class="tags-wrap">
<label for="tags">Search: </label>
<input class="tags">
</span>

---

如果您不想手动添加tags-wrap类，您可以使用jQuery，如下所示：

// Automatically add the 'tags-wrap' class to the immediate parent of the
// autocomplete input fields.
$('.tags').parent(':not(:has(.icon))')
.addClass('tags-wrap');

演示：http://jsfiddle.net/2c9pxL7o/

Answer 3

如果你只想在文本框中添加一个图标，为用户提供线索，我建议添加一个背景图像作为图标来实现它。

input.ui-autocomplete-input {
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini-4/48/paper-plane-icon.png") right 4px center no-repeat;
background-size: auto 80%;
border: 1px solid;
padding: 4px 24px 4px 4px;
}

<input type="text" class="ui-autocomplete-input"><br>
<br>
<input type="text" class="ui-autocomplete-input"><br>
<br>
<input type="text" class="ui-autocomplete-input"><br>
<br>
<input type="text" class="ui-autocomplete-input">

Answer 4

如果你可以编辑HTML，你可以用label包装你的输入，你不需要for/id，然后可以使用AND。

::after只能用于容器元素(关闭元素(例如<input/>和<img/>不能通过css 具有::after

示例

label {
position: relative;
}
label:after {
position: absolute;
right: 5px;
top: 0px;
content: 'V';
color:red;

}

<label>Search: 
<input type="text">
</label>