下拉列表的滚动条颜色变化答案

【问题标题】：dropdownlist's scrollbar color change下拉列表的滚动条颜色变化
【发布时间】：2013-04-11 10:16:00
【问题描述】：

我有一个下拉列表，它有一个滚动条。我想改变这个滚动条的颜色。您可以从DEMO 看到工作代码。我的代码是

<!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>*

如何更改此下拉列表滚动条的颜色？

【问题讨论】：

这个问题你已经重复了多少次了？您的虚假选择列表包含在一个 div 中。如果你真的想要，你可以找到一种方法来伪造 div 的滚动条，就像使用 jscrollpane 之类的东西一样。

标签： javascript jquery html css kendo-ui

【解决方案1】：

在这个 kendoui 论坛帖子中被问到一个类似的问题：http://www.kendoui.com/forums/ui/dropdownlist/changing-scrollbar-in-kendo-dropdownlist.aspx

没有简单/内置的解决方案，建议的解决方法是：

css 样式的滚动条，但实际上不是跨浏览器解决方案（CSS scrollbar style cross browser 和 Div Scrollbar - Any way to style it?）
尝试让jscrollpane或其他插件与kendoDropDownList一起工作

【讨论】：