Change background color for auto-complete in the search widget? - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

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

  • Change background color for auto-complete in the search widget?
  • 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.  
  • 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