試圖創建一個帶有附加按鈕的文本輸入

我試圖創建一個帶有附加按鈕的文本框，該按鈕看起來類似於Kendo DatePicker或NumericTextBox。這很接近，但並不完全一致。任何幫助理順這一點，將不勝感激。試圖創建一個帶有附加按鈕的文本輸入

如果你需要

<style> 
    .unselectable 
    { 
     -moz-user-select: -moz-none; 
     -khtml-user-select: none; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 
</style> 

<span class="k-widget k-datepicker k-header" style="width: 136px"> 
    <span class="k-picker-wrap k-state-default"> 
    <input class="k-input" type="text" name="searchParam" id="searchParam" placeholder="Name ..." /> 
     <span class="unselectable k-button k-select"> 
      <img class="unselectable" src="~/Images/search_flashlight_16.png" /> 
     </span> 
    </span> 
</span>

來源

2013-05-13 sumpubu

一切是這樣的：見jsFiddle DEMO

<span class="k-textbox k-button k-space-right"> 
    <input value="This is the value" /> 
    <a class="k-icon k-filter"></a> 
</span>

另見「文檔」（看源的例子）本here。

編輯： 因爲提問者真的希望它表現爲一個按鈕（即單擊效果），就在K-按鈕類添加到outter跨度。

來源

2013-05-14 06:54:52 Shion

謝謝！我錯過了文檔中的這一部分。這幾乎是完美的。我真的希望它的行爲像一個按鈕。如果你點擊這個，它不會像按鈕一樣改變顏色。 – sumpubu 2013-05-14 13:30:56

看我的編輯。只需在外部範圍添加一個K按鈕類。 – Shion 2013-05-14 14:12:14

太近了。當你點擊文字時，按鈕也會點擊。 – sumpubu 2013-05-14 18:03:59

試圖創建一個帶有附加按鈕的文本輸入

回答

相關問題