尝试使用附加按钮创建文本输入

Question

我正在尝试创建一个带有附加按钮的文本框,该按钮看起来类似于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>

Answer 1

你应该需要的一切是这样的:见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>

另请参阅此处的"文档"(查看示例的源代码).

编辑: 由于提问者真的希望它表现为一个按钮(即点击效果),只需将k按钮类添加到外部范围.