Search code examples
kendo-uikendo-dropdown

How to disable blue highlight from kendo dropdown list

How to disable blue highlight from this kendo list :

enter image description here

Thank you in advance

Solution

  • You can do it with some creative style overriding to get the effect you want. i.e.

    <style>
    .k-item.k-state-selected.k-state-focused:not(:hover) {
        background-color: transparent;
        color: inherit;
    }
</style>

    will get rid of the blue highlight colour but still show the grey highlight when hovering and it also fixes the font colour back to black. So you get black on transparent instead of white on blue.

    http://dojo.telerik.com/@Stephen/EtUXE

    But it can be difficult to get the CSS selector just right to only change the particular styling you want without affected other kendo widgets on the page that use similar styling selectors.

    Getting the correct style rule is particularly difficult in this case because the list portion that pops up is a disconnected popup that is not a child of the dropdownlist so you can't use a child selector to only target dropdownlist popups...as you can see in my dojo example, both dropdownlists are affected, as would an comboboxes and any other kendo widgets that use the same style rules.