Css - 复选框上的自定义样式不起作用答案

【问题标题】：Css - Custom style on checkbox not workingCss - 复选框上的自定义样式不起作用
【发布时间】：2013-04-17 06:57:49
【问题描述】：

首先我有一个剑道网格。现在我正在向 DataSource 动态添加一个复选框，如下所示：

var chkBox =  "<input type='checkbox' id='chUpload'/><label for='chUpload'><a href='#' id='cbChoose'></a>test</label>";

var uploadedFiles = 
[
    { 
        facility: "Sunrise medical Laboratories", 
        documentName:  "Lab Results",
        documentType: "PDF",
        selected: chkBox
    }
];

以下是复选框上实现的样式：

input[type="checkbox"]
{
    display:none;
}

input[type="checkbox"] + label a
{
    display:inline-block;
    width:14px;
    height:14px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url('../images/checkBox.png') right top no-repeat;
    cursor:pointer;
    float:right;
    margin-top:10px;
    margin-right:10px;
}

input[type="checkbox"]:checked + label a 
{
    background:url('../images/checkBox.png') -1px top no-repeat;
}

我发现这些样式适用于我添加到面板栏的选项卡，但在网格中，没有显示任何内容。

我创建了一个jsfiddle，其中黑框是样式复选框。我在 css 中隐藏了 display:none; 以查看所有文本框的位置。如果它正在使用中，则网格中不会显示自定义复选框。

有什么想法吗？

【问题讨论】：

您需要删除模板值，因为它被放置而不是 chkBox 变量。即`模板：“"`
我刚刚注意到我有字段和模板。当模板被移除时，field 将 chkBox 解释为字符串，而不是 html 代码，如下所示：(jsfiddle.net/97gqZ/30)。

标签： javascript css checkbox kendo-grid

【解决方案1】：

我发现了问题。

template: "<input type='checkbox' style='margin-right:23px; margin-top:0px;'  />"

应该是：

template: "#= selected #"

这是我的一个简单错误。

这是一个有效的example。

【讨论】：

我现在明白了...删除了我的答案。
没问题。还是谢谢。