Colors of Kendo dropdownlist button are inverted when hovering

[Vincent]

The styling for DropdownList with fillmode="outline" appearance option set appears to be broken:

Vue Dropdowns Library & DropDownList Component - Appearance - Kendo UI for Vue Docs & Demos (telerik.com)

When hovering over the dropdown the colors are inverted, showing a black dropdownlist button background and white text
I expected this would be a slightly grey background with black text when hovering over the dropdownlist. 

[Petar]

Hello, Vincent. 

I've just checked the styles of the DropDownList component in the different Kendo UI suites(React, Angular, jQuery), and the DropDownList colors in the discussed scenario are all the same in all suites.

I also checked the discussed configuration with an older version of the Kendo Themes(5.10.0) and with the "Outline" configuration, the colors are the same. Here you can check the demo with Kendo Theme version 5.10.0.

Based on the above research I cannot confirm that the colors are inverted. If you want to have specific colors when hovering the DropDownList in an Outline fill mode, you can use a CSS like this to customize the hover state of the component:

.k-picker-outline:hover,
.k-picker-outline.k-hover {
  border-color: red;
  color: green;
  background-color: lightgray;
}

Here is an example using the above CSS.

If you think that no matter the above details, there is still an issue with the DropDownList, please share more details with us and we will do additional research and provide feedback.

Looking forward to your reply.

Regards,
Petar
Progress Telerik