+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Change background color for auto-complete in the search widget?

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

2 posts, 0 answered
  1. Sara
    Sara avatar
    2 posts
    Registered:
    08 Jun 2015
    25 Aug 2015
    Link to this post
    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.  
  2. Sabrie Nedzhip
    Sabrie Nedzhip avatar
    534 posts
    Registered:
    27 Sep 2016
    27 Aug 2015
    Link to this post
    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
     
2 posts, 0 answered