Cố gắng tạo một kiểu nhập văn bản bằng một nút đính kèm

Question

Tôi đang cố gắng tạo một hộp văn bản có nút đính kèm trông giống như một Kendo DatePicker hoặc NumericTextBox. Điều này là gần, nhưng nó không hoàn toàn xếp hàng. Bất kỳ sự trợ giúp nào cũng sẽ được đánh giá cao.

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

Answer 1

Tất cả những gì bạn nên cần là thế này: Xem 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> 

Ngoài ra hãy xem phần "tài liệu" (Nhìn vào nguồn cho ví dụ) cho here này.

EDIT: Kể từ khi hỏi thực sự muốn nó hoạt động như một nút (ví dụ: các nhấp hiệu lực thi hành), chỉ cần thêm lớp k-nút đến khoảng outter.