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

admin管理员组

文章数量:1355570

i'm struck with a problem i have a big project having global css with this css i want to place icon to every autoplete 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>

i'm struck with a problem i have a big project having global css with this css i want to place icon to every autoplete 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 autoplete 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/cS2bL/66/ (Working)

 $(function() {
var availableTags = [
"john",
"khair",
"pton",
"Jordan",
"Micheal",
"Peter"
];
$( ".tags" ).autoplete({
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-autoplete-input:after{
  position: absolute;
  content: 'V';
  color:red;
  
}

/* tried for above element */

<script src="https://ajax.googleapis./ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis./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!!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 22, 2018 at 9:15 EaBengaluru asked Jul 21, 2018 at 5:04 EaBengaluruEaBengaluru 8922 gold badges3030 silver badges7373 bronze badges 2

• If you ask how can I can I add icon to 1000 inputs, the answer is like this using jQuery. If you ask how to add icon without adding any HTML i.e adding a pseudo element to input, the answer is here. – Munim Munna Commented Jul 28, 2018 at 21:08
• nice solution even though, adding 1000 times after(icon) would not borther me. please post your solution!!! – EaBengaluru Commented Jul 29, 2018 at 1:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4 +50

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",
    "pton",
    "Jordan",
    "Micheal",
    "Peter"
  ];
  $(".tags").autoplete({
    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-autoplete-input {
    padding-left: 18px;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./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>

Note: <span class="icon"></span> which i cannot inject to every autoplete 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 autoplete 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
// autoplete input fields.
$('.tags').parent(':not(:has(.icon))')
    .addClass('tags-wrap');

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

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-autoplete-input {
  background: url("http://icons.iconarchive./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-autoplete-input"><br>
<br>
<input type="text" class="ui-autoplete-input"><br>
<br>
<input type="text" class="ui-autoplete-input"><br>
<br>
<input type="text" class="ui-autoplete-input">

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>

本文标签：