kendo dropdownlist default item styling

[sai dheeraj]

Hi I am trying to style default item select in my project but when i inspect select item in browser through element it is showing Kendo-popup k-animation-container k-animation-container-shown but it is not showing default item elements select to change the styling for the default item select can you please let me know what class will be for default item select to change styling

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/default-item/

[Hetali]

Hello Sai,

In order to style the default item of the Kendo UI DropDownList, use the following CSS:

.k-list-optionlabel,
.k-list-optionlabel:hover {
  color: red;
}
     
.k-selected.k-list-optionlabel,
.k-selected.k-list-optionlabel:hover {
  color: #ffffff;
  background-color: red;
}

Here's a StackBlitz example where I have styled the default item of the DropDownList. Make sure to set the encapsulation to ViewEncapsulation.None to apply the style locally.

For future, to get any class name of any popup component, use the preventDefault method in the close event of that component and inspect the element.

I hope this information helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik