3

我需要更改 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 类，但没有任何改变。

4

3 回答 3

3

您正在使用 Kendo UI Web 框架，并且其中没有定义按钮小部件。按钮小部件仅适用于 kendo UI Mobile 框架。k-button 类将不起作用，因为 Kendo 忽略了该元素。因此，您需要像往常一样使用 CSS 或内联样式设置按钮样式。<input type="submit" style="background:red">

于 2013-02-25T13:56:53.337 回答
3

这是一个自定义 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;
    }
于 2014-02-23T02:44:49.597 回答
1

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

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

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

a.k-button {
   height: 33px;
   font-size: 14px;
   margin: 5px;
   text-decoration: none;
   background-color: #2c2c2c;
}
于 2013-07-10T19:46:14.260 回答