改变Kendo UI按钮的颜色

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类，但是没有任何变化。

- Supermode

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;
    }

- zacharydl

Answer 2

您正在使用Kendo UI Web框架，但它没有定义按钮小部件。按钮小部件只适用于kendo UI移动框架。 k-button类不起作用，因为Kendo忽略了该元素。所以，您需要像通常一样使用CSS或内联样式来设置按钮的样式。例如：<input type="submit" style="background:red">

- Nishanth Nair

---

这是一个Kendo UI Web按钮控件。http://demos.telerik.com/kendo-ui/web/button/index.html - zacharydl

Answer 3

Web Kendo UI框架没有公开暴露按钮小部件，但您可以通过定义一个带有k-button类的链接来使用它:

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

现在，您可以使用 a.k-button 选择器随心所欲地进行样式设置：

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

- Alek

---

包括：a.k-button.k-state-active {...} 和 a.k-button:hover {...} - Andrew-NZ