javascript - 如何在没有 javascript 任何元素注入的情况下将图标放置到每个 jquery ui 自动完成

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>我无法autocomplete 使用 javascript 或 jquery 将其注入全局。只有css我必须达到预期的结果

以下是我实现上述预期结果的示例元素：

JSFIddle： 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>

请帮助我提前谢谢！

标签： javascriptjqueryhtmlcss

Answer 1

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

label所以你可以在输入之前使用伪元素。由于 alllabel和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>