javascript - 如何在不通过 javascript 进行任何元素注入(inject)的情况下将图标放置到每个 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>我不能注入(inject)每个 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>

请帮助我提前谢谢!!

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>