2013-02-25 108 views
1

我需要更改Kendo ui产品中按钮的颜色。请指教。谢谢更改颜色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-按钮类,但什么都没有改变。

回答

1

您正在使用Kendo UI Web框架,并且没有定义按钮小部件。按钮小部件仅适用于kendo UI Mobile框架。 K-button类不会像Kendo那样忽略元素。所以你需要使用CSS或内联样式来设置按钮的样式,正如通常所做的那样。 <input type="submit" style="background:red">

+0

这是一个Kendo UI Web按钮控件。 http://demos.telerik.com/kendo-ui/web/button/index.html – zacharydl 2014-02-22 23:56:05

1

在Web剑道UI框架不公开按钮控件,但你可以通过定义类k-按钮链接使用它:

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

其中包括:a.k-button.k-state-active {...}和a.k-button:hover {...} – 2016-02-26 20:06:36

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