Question

我想要做的是当我点击我的图片时，我希望kendo dorpdownlist为我提供一些选择。有可能吗？

我尝试用CSS替换dropdownlist的defautl模板但没有成功。

这里我只是尝试替换下拉列表的默认黑色箭头，但没有成功。消息来源：http://docs.kendoui.com/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');
}

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

Answer 1

要记住几个问题：

包含箭头的HTML元素不是customList的后代，而是兄弟的后代。这是因为KendoUI 用其他人装饰原始元素。
您只是重新定义background-image，但您需要重新定义两个额外的CSS属性：background-position和background-size，因为它是在Kendo UI CSS文件中定义的，用于抵消k-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;
}

如果您可以重新定义每个其他元素 OR ，那么您可以通过编程方式定义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");

按自定义图像替换Kendo默认下拉列表模板？

1 个答案: