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

If you ask how can I can I add icon *to 1000 inputs*, the answer is [like this using jQuery](http://jsfiddle.net/monim67/cS2bL/82/). If you ask how to add icon *without adding any HTML* i.e adding a pseudo element to input, the answer is [here](https://stackoverflow.com/q/2587669). — Munim Munna, Jul 28 '18 at 21:08
nice solution even though, adding `1000` times `after(icon)` would not borther me. please post your solution!!! — EaBengaluru, Jul 29 '18 at 01:11

score 4 · Answer 1 · answered Jul 31 '18 at 18:56

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>

score 3 · Answer 2 · answered Jul 30 '18 at 02:20

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/

Well actually, this will only work if the parent/container contains only one pair of *`autocomplete` input and its label (the "Search:" text)* - there's one input that fails here: http://jsfiddle.net/2c9pxL7o/ ... — Sally CJ, Jul 30 '18 at 02:33

score 2 · Answer 3 · answered Jul 21 '18 at 10:32

2

If you can edit your HTML you wrap your input with your label you dont need a for/id then AND you can use after.

::after can only be used on container elements(closing ones) for example <input/> and <img/> cant have an ::after via css

Example

label {
  position: relative;
}

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

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

answered Jul 21 '18 at 10:32

SirPilan

4,649
2
13
26

i don't want to wrap each and every input with label, as my project is having more than 1000 input. i can't do as i'm trying? – EaBengaluru Jul 22 '18 at 09:13
@skBangalore well, in this case I dont see any way to do this with pure css – SirPilan Jul 22 '18 at 16:09

Chaska · Accepted Answer · 2018-08-01T09:09:53.010

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

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

4 Answers4