Kendo 下拉菜单更改颜色 - 容器列表底部的白线

Question

I'm trying to change color and background color of Kendo's dropdown.

@(Html.Kendo().DropDownList()
    .Name("typeId")
    .DataTextField("Text")
    .DataValueField("Value")
    .OptionLabel("Please select an option")
    .Events(e =>
    {
        e.Close("someEvent");
    })
    .BindTo(Model.Types)
    .HtmlAttributes(new { @class = "ddKendo", style = "width:30%" })
)

my css to change color:

.ddKendo > .k-dropdown-wrap > .k-input, .k-dropdown, .k-dropdown-wrap, .k-select, .k-list, .k-reset {
    background-color: rgb(242, 242, 242);
    color: rgb(127, 127, 127);
}

This code almost works. Almost, because dropdown list container has white line on the bottom - you can see it on the screen below:

I inspected elements and element with white line is:

<div class="k-animation-container" style="width: 419px; height: 151px; box-sizing: content-box; overflow: hidden; top: 778px; z-index: 10002; left: 741.797px; padding: 0px; display: none; position: absolute;" aria-hidden="true">
    <div class="k-list-container k-popup k-group k-reset" id="ddContactPage-list" data-role="popup" aria-hidden="true" style="position: absolute; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-stretch: 100%; font-style: normal; font-weight: 400; line-height: 21px; width: 419.391px; min-width: 419.391px; white-space: normal; height: 100%; transform: translateY(-151px); display: none;">
        <div class="k-list-optionlabel k-state-selected k-state-focused" id="ad46639e-c456-4aca-9681-9a6a56bd49df">Please select an option</div>
        <div class="k-group-header" style="display:none"></div>
        <div class="k-list-scroller" unselectable="on" style="height: auto;">
            <ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" id="ddContactPage_listbox" aria-live="off" data-role="staticlist" role="listbox">
                <li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="0">Report a bug</li>
                <li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="1">Submit a change request</li>
                <li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="2">Submit a project</li>
                <li tabindex="-1" role="option" unselectable="on" class="k-item" aria-selected="false" data-offset-index="3">Other</li>
            </ul>
        </div>
        <div class="k-nodata" style="display:none">
            <div>No data found.</div>
        </div>
    </div>
</div>

I tried to do this with:

.k-animation-container {
    background-color: rgb(242, 242, 242);
}

but no effect.

Answer 1

You can change the background color and text color of kendo dropdown using the dropdown id list container through following styles,

#ddContactPage-list {
    background-color: orange;
    color: red;
}

Additionally if you want to update selected item's focused color and hover color, you can apply the following styles,

#ddContactPage-list .k-state-focused {
    color: orange;
    background-color: red;
}

#ddContactPage-list .k-state-hover {
    color: blue;
    background-color: lightblue;
}

Example dojo is here (products dropdown).