Change background color for auto-complete in the search widg

Posted by Community Admin on 05-Aug-2018 13:06

Change background color for auto-complete in the search widget?

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 25-Aug-2015 00:00

I have tried adding background-color to k-widget, k-autocomplete, k-header, k-state-default, k-icon, and k-loading. None of them seem to have any effect. Our search is on a colored background and so it is difficult to read the autocomplete options in the drop down as you type in the search box. I was hoping to change the background of the list to white.  

Posted by Community Admin on 27-Aug-2015 00:00

Hello Sara,

You need to apply the css styles to the k-list css class. Can you please try to use the below css in order to set the background color of the search autocomplete list:

.k-list
  background-color: red !important;

I have used the red color only as a sample. You can change it to the desired color.

If you would like to change the background of the item from the autocomplete list on hover you can use the .k-state-hover class:

.k-state-hover
   background-color: green !important;

Please note to use the !important clause in order to make sure that your custom css styles will be applied.

You can also use the DevTools of your browser in order to inspect the css classes and default styles applied by to the autocomplete list and set your own css styles.

Regards,
Sabrie Nedzhip
Telerik
 
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
 

This thread is closed