Hello All,
Hope all are doing good, this post talks about skinning af:inputListOfValues to hide its search icon (magnifying glass)
we can use the auto-suggest feature in inputListOfValues so if we don’t want to display that default search icon then what to do?

• af:inputListOfValues looks like this in ADF Faces

•  I have created a page and dropped 2 inputListOfValues on page

•  There are 2 types of requirement about hiding search icon
  1. Hide icon of all inputListOfValues(LOVs) available on page or application
  2. Hide icon of some selected fields
• To do this we have to create a CSS (skin) in application

• Give the relevant name of CSS file and set this file as default skin of the application

• Now to hide icon of the selected inputListOfValues component in an application, go to the source of CSS file and just write this code

.TagSearchIconHidden af|inputListOfValues::search-icon-style
{
display: none;
}

• Now go to the page and paste TagSearchIconHidden in StyleClass property of LOV component to hide its icon, run your page and see, I have done this in my first LOV

•  Now to hide icons of all Lov component just change CSS file with this script

af|inputListOfValues::search-icon-style
{
  background-image: none; 
}

• Now no need to set StyleClass, it is applicable to all LOV components of the application

Cheers 🙂 Happy Learning