How to change the selected item's background in the popup of a dropdownlist?

[Nabakamal]

Right now, the selected item's background is orange in the popup that's shown when we click on the drop down list, but I want to change it to blue, for instance. What is the style that I can apply. I have tried using css classes, popupsettings, etc. but to no avail. 

For instance, 

In the image above, I would want the colour of "Los Angeles" to be set to something else. Please advise. 

[Nabakamal]

Just to add to this, when I use the following style, I can get rid of the "orange" colour, but I do want the selected element's colour(in the popup) to be set to blue, for e.g.:

.k-animation-container li, .k-animation-container-shown li {
  background-color: white !important;
  color: black !important;
}

[Martin Bechev]

Hi Nabakamal,

In order to change the default styling of the DropDownList popup, use the popupSettings property and its popupClass option. This allows the developer to set a specific class to the popup and customize only the popup of the DropDownList.

  <kendo-dropdownlist
                [data]="listItems"
                [value]="value"
                [popupSettings]="{popupClass: 'selectedItem'}"
            >
            </kendo-dropdownlist>

Use the new class to create a selection that targets the element for which styling should be customized. In this case, this is the <li> element with .k-selected class:

 .selectedItem .k-list-content .k-list-item.k-selected{
   background-color: blue;
 }

Here is an example:

https://stackblitz.com/edit/angular-cksbwu

It is important to mention that in order for the custom styles to take effect, the encapsulation metadata should be set to ViewEncapsulation.None. More information regarding this matter can be found in the below Knowledge Base article: 

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

I hope this helps.

Regards,
Martin Bechev
Progress Telerik

[Nabakamal]

Thanks, this worked. Mine's working without setting the encapsulation to "None", so I guess it is kind of a grey area that one - as I've seen styles work/not work based on that setting before but not exactly sure how it is applied in this instance.   

[Martin Bechev]

It depends on where the customs styles are declared - inside the component, or on the root styles.css and which elements are actually customized. For instance:

This customization doesn't require ViewEncapsulation.None:

kendo-dropdownlist {
       width: 170px;
}

But this styling would take effect only with ViewEncapsulation.None:

.k-dropdownlist {
            width: 170px;
 }