Hiding search icon of af:inputListOfValues using CSS & ADF Skin

Sharing is Caring

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
af:inputListOfValues
  •  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

Related Posts

1 thought on “Hiding search icon of af:inputListOfValues using CSS & ADF Skin”

Leave a Reply

Your email address will not be published. Required fields are marked *