how to style the kendo-popup from kendo-dropdownlist

[Jaime]

Hi,

I have a kendo-dropdownlist and I want to override the style of the kendo-popup. I want to change the font as well as change the style for the selected item (see attached file) like the background color, etc...

How do I go about doing this? I've tried styling using pseudo ::ng-deep, :host ::ng-deep to using the classes .k-popup, the li's .k-list-item, etc..

Thanks!

 

Jaime

[Hetali]

Hello Jaime,

In order to change the font of the list and the style of the selected item in the Kendo UI DropDownList, use the following CSS  snippet:

/* To change the font of the list */

.k-list-md .k-list-item,
.k-list-md .k-list-item:hover {
  font: 15px Arial, sans-serif;
  border-radius: 25px;
}


/* To change the style of the selected item */ 

.k-list-item.k-selected,
.k-list-item.k-selected:hover {
  background: lightgray;
  color: green;
  border-radius: 25px;
  box-shadow: none;
}

In this StackBlitz example, I have changed the font of the list, styling of the selected item and the styling when you hover over the list items in the DropDownList.

Please make sure to set the encapsulation to ViewEncapsulation.None to apply the style locally.

Let me know if this solution helps or if I can further assist you with modifying the look of the DropDownList.

Regards,
Hetali
Progress Telerik

[Jaime]

Thank you so much! I'll give it a whirl