我有一个下拉列表，它有一个滚动条。我想改变这个滚动条的颜色。 您可以从 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>*
如何更改下拉列表滚动条的颜色？
最佳答案
在这个 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 一起使用
关于javascript - 下拉列表的滚动条颜色变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15946220/