how to place icon to every jquery ui autocomplete without any elemernt injection by javascript

Question

i'm struck with a problem i have a big project having global css with this css i want to place icon to every autocomplete so that it gives clue to users

it should something look like below one:

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

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

Note: <span class="icon"></span> which i cannot inject to every autocomplete globally with javascript or jquery. with css only i have to achieve desired result

below is my sample elements to achieve above desired result:

JSFIddle:http://jsfiddle.net/cS2bL/66/ (Working)

 $(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>

Please help me thanks in advance!!

Answer 1

Pseudo element like :after, :before can not be used with input elements. It can used with container elements which can have child.

So you can use pseudo element with label before the inputs. Since all label and input are not same in width you can use icon in first of input instead of last.

$(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

Note: <span class="icon"></span> which i cannot inject to every autocomplete globally with javascript or jquery. with css only i have to achieve desired result

OK, but you could at least add a custom class (name) to the immediate parent of the autocomplete field/input??

See below where I added tags-wrap class to the input container.

.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>

---

If you don't want to manually add the tags-wrap class, you can use jQuery like so:

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

Demo for that: http://jsfiddle.net/2c9pxL7o/

Answer 3

If you just want to add an icon in the textbox that gives clue to users, I suggest that adding an background image as an icon to achieve it.

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">