1

我想要做的是当我点击我的图片时，我希望 kendo dorpdownlist 向我推荐一些选项。是否可以 ？

我试图用 CSS 替换下拉列表的默认模板，但没有成功。

在这里，我尝试简单地替换下拉列表的默认黑色箭头，但没有成功。来源：http ://docs.kendoui.c​​om/getting-started/web/appearance-styling?x=54&y=12

-----------------------------------------HTML

<select id="customList" class="k-widget k-dropdown"></select>

-----------------------------Javascript

$("#customList").kendoDropDownList().data("kendoDropDownList");

-----------------------------------------CSS

#customList .k-icon .k-i-arrow-s
{
    background-image:url('../../resources/img/components/addtab.png');
}

但我真正想要实现的是完全替换剑道下拉列表的默认模板，并用我的图像代替。

4

1 回答 1

1

有几个问题要记住：

  1. 包含箭头的 HTML 元素不是兄弟姐妹的后代，customList而是兄弟姐妹的后代。这是因为 KendoUI用其他元素装饰了原始元素。
  2. 您只是重新定义background-image，但您需要重新定义两个额外的 CSS 属性：因为它是在 Kendo UI CSS 文件中定义的，用于偏移background-position图标。background-sizek-i-arrow-s

所以，你应该这样做：

span.k-icon.k-i-arrow-s {
    background-image:url('../../resources/img/components/addtab.png');
    background-size: 16px 16px;
    background-position: 0 0;
}

如果您可以重新定义每个附加元素，或者您以编程方式定义 CSS：

.ob-style {
    background-image:url('../../resources/img/components/addtab.png');
    background-size: 16px 16px;
    background-position: 0 0;
}

和一个 JavaScript：

var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
于 2013-03-07T17:41:09.350 回答