Search code examples
cssautocompleteprimeng

Clear Icon along with loading Icon on PrimeNG Autocomplete

I would like to customize the X icon on the p-autocomplete component, in order to get this:

Loading suggestions phase:

enter image description here

Done loading suggestions:

enter image description here

The only thing that i'm getting right now is this:

enter image description here

The X icon doesn't move to the right, even if the primeng loading icon is not visible. The only thing i was able to achieve was this:

enter image description here

input[type="search"] {
  padding-right:0px!important;
}

I know that i can customize the X icon by using

input[type="search"]::-webkit-search-cancel-button {
  ...
}

But i don't know how. Any suggestions?

EDIT:

This is how you achieve to show the X icon:

<p-autocomplete ... [type]="'search'"></p-autocomplete>
Solution

  • Try to add this to your CSS :

    i.ui-autocomplete-loader {
  margin: -44px;
}

    Result

    enter image description here

    See StackBlitz