dropdownlist's scrollbar color change

Question

I have a dropdown list and it has a scrollbar.I want to change the color of this scrollbar. You can see the working code from DEMO. My code is

<!DOCTYPE html>
<html>
<head>
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />

  <script>

  </script>
</head>
<body>
            <div id="example" class="k-content">

            <div class="demo-section">
                <h2>View Order Details</h2>
                <p>
                    <label for="categories">Categories:</label><input id="categories" style="width: 300px" />
                </p>
                <p>
                    <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
                </p>
                <p>
                    <label for="orders">Orders:</label><input id="orders" disabled="disabled" style="width: 300px" />
                </p>

                <button class="k-button" id="get">View Order</button>
            </div>

            <style scoped>
                .demo-section {
                    width: 460px;
                    padding: 30px;
                }
                .demo-section h2 {
                    text-transform: uppercase;
                    font-size: 1.2em;
                    margin-bottom: 30px;
                }
                .demo-section label {
                    display: inline-block;
                    width: 120px;
                    padding-right: 5px;
                    text-align: right;
                }
                .demo-section .k-button {
                    margin: 20px 0 0 125px;
                }
                .k-readonly
                {
                    color: gray;
                }
            </style>

            <script>
                $(document).ready(function() {
                    var categories = $("#categories").kendoDropDownList({
                        optionLabel: "Select category...",
                        dataTextField: "CategoryName",
                        dataValueField: "CategoryID",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
                            }
                        }
                    }).data("kendoDropDownList");

                    var products = $("#products").kendoDropDownList({
                        autoBind: false,
                        cascadeFrom: "categories",
                        optionLabel: "Select product...",
                        dataTextField: "ProductName",
                        dataValueField: "ProductID",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Products"
                            }
                        }
                    }).data("kendoDropDownList");

                    var orders = $("#orders").kendoDropDownList({
                        autoBind: false,
                        cascadeFrom: "products",
                        optionLabel: "Select order...",
                        dataTextField: "Order.ShipCity",
                        dataValueField: "OrderID",
                        dataSource: {
                            type: "odata",
                            serverFiltering: true,
                            transport: {
                                read: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
                            }
                        }
                    }).data("kendoDropDownList");

                    $("#get").click(function() {
                        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
                            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
                            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

                        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
                    });
                });
            </script>
        </div>


</body>
</html>*

How can I change the color of this sropdown list's scroll bar?

How many times have you repeated this question now? Your fake select list is wrapped in a div. If you really wanted you could find a way to fake the div's scrollbar as is done with something like jscrollpane. — louisbros, Apr 11 '13 at 10:24

score 1 · Answer 1 · edited May 23 '17 at 11:43

In this kendoui forum post is asked a similar question: http://www.kendoui.com/forums/ui/dropdownlist/changing-scrollbar-in-kendo-dropdownlist.aspx

There is no simple/built in solution, the suggested workarounds are:

css styling the scrollbar, but actually is not a crossbrowser solution (CSS scrollbar style cross browser and Div Scrollbar - Any way to style it?)
try to let jscrollpane or other plugins works with kendoDropDownList

dropdownlist's scrollbar color change

1 Answers1