Question

我需要更改Kendo ui产品中按钮的颜色。请指教。谢谢

这是我的代码：

<form method="post" action='@Url.Action("Index")' style="width:45%">
    <div>
        @(Html.Kendo().Upload()
                    .HtmlAttributes(new { @Style = "align:center; font-size:12px" })     
                    .Name("FileUpload")
                    .Multiple(false)
                    .Events(ev => ev.Success("onSuccess"))
        )
        <input type="submit" id="btnSubmit" value="Import" style="height:33px; font-size:14px" class="k-button" />
    </div>
</form>

我试图更改k-button类，但没有任何改变。

Answer 1

这是一个自定义CSS类的JSFiddle来完成此任务。你基本上必须处理一个渐变和一个删除它的悬停。我有通过附加.k-state-disabled类禁用按钮的情况。如果您不需要禁用按钮，请删除第三个样式块。

.primary {
    background-color: #64a1d5;
    background-image: linear-gradient(to bottom, #64a1d5, #428bca);
    color: #fff;
    border-color: #428bca;
    min-width: 70px;
}

    .primary:hover {
        background-color: #428bca;
        color: #fff;
        border-color: #428bca;
    }

    .primary.k-state-disabled, .primary.k-state-disabled:hover {
        background-color: #8dc5e1;
        color: #fff;
    }

Answer 2

您正在使用Kendo UI Web框架，并且没有定义按钮窗口小部件。 Button小部件仅适用于kendo UI Mobile框架。 k-button类不会工作，因为Kendo忽略了元素。所以你需要使用CSS或内联样式来设置你的按钮样式。 <input type="submit" style="background:red">

Answer 3

Web Kendo UI Framework不公开按钮小部件，但您可以通过使用类k按钮定义链接来使用它：

<a id="btnSubmit" class="k-button" value="Import" />

现在，您可以使用a.k按钮选择器以任何方式设置样式：

a.k-button {
   height: 33px;
   font-size: 14px;
   margin: 5px;
   text-decoration: none;
   background-color: #2c2c2c;
}

改变颜色剑道ui按钮

3 个答案: