2013-02-25 106 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; 
    }