Css 剑道UI网页-下拉列表，每个列表项上有不同的背景色。

我正在玩剑道UI网络，并找到方法来定制它的具体需求。 在我的示例中，我简单地添加了剑道UI下拉控件，其中的示例列表项的背景需要使用各自的颜色进行渲染

---

我花了一些时间检查元素以改变其样式，但尚未找到控制每个列表项的解决方案。有人对此有经验吗？

有容易的部分和困难的部分。简单的是背景，困难的是让它看起来很漂亮

简单，定义用于呈现每个列表项的模板：

<script id="template" type="text/kendo-tmpl">
    <div style="background-color: #= text #;">#= text #</div>
</script>

但这可能不像你想要的那么好，因为在我的模板之前，<代码> <代码>有一个由Kunoui引入的<代码>

<代码>，除非你想开始玩它，你可以考虑只显示一个带有项目颜色的颜色方块。< /P> 您可以执行以下操作：

开始为颜色方块定义CSS：

.ob-patch {
    margin: 4px 6px 0 0 !important;
    height: 14px;
    width: 14px;
    float: left;
    border: 1px solid black;
}

那么每个项目的模板将是：

<script id="template" type="text/kendo-tmpl">
    <div>
        <div style="background-color: #= text #;" class="ob-patch">&nbsp;</div>
        #= text #
    </div>
</script>

您的JS Bin使用这种方法进行了修改

编辑：如果希望输入的背景获得所选项目的颜色，应使用：

function setColor() {
    var val = this.value();
    this.input.css("background-color", val);
}

$("#combobox").kendoComboBox({
    template : $("#template").html(),
    dataBound: setColor,
    change   : setColor
});

---

其中，

更改

事件处理程序从所选选项设置

输入

的值，而

数据绑定

事件处理程序对初始值进行设置。

感谢您的输入。虽然获得背景可能看起来很难看，但这是我必须处理的要求。我再次尝试使用您的示例，但背景渲染掩盖了文本。我希望结果与底部列表相似，除了选中时会丢失背景的行为。更新并没有覆盖文本，只是删除了文本。模板应该是

#=text#

（

#=text#

是两个，一个用于背景色，另一个用于文本）。看这里，我明白了。谢谢。最后一件事我想知道的是如何保持背景色，即使选择。所选项目似乎丢失了背景。再次感谢。你的意思是一旦它被选中并且列表关闭？是的。当列表关闭时，所选项目应保留背景。

$('#combobox').kendoComboBox({
    template: $("#template").html()
});

function setColor() {
    var val = this.value();
    this.input.css("background-color", val);
}

$("#combobox").kendoComboBox({
    template : $("#template").html(),
    dataBound: setColor,
    change   : setColor
});