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>

另请参阅此here的“文档”（查看示例的源代码）。

修改由于提问者真的希望它表现为按钮（即点击效果），只需将k按钮类添加到外部范围。

Answer 2

我知道这是一个老问题，但是我觉得Shion's answer并不是我想要的。因此，在进行了一些试验之后，我想到了这一点，但并没有使您看到按钮的闪烁：

<span class="k-picker-wrap k-state-default">
  <input style="width: 100%;" type="text" class="k-input">
  <span unselectable="on" class="k-select" aria-label="select" role="button">
    <span class="k-icon k-i-filter"></span>
  </span>
</span>

实时示例：Dojo

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

2 个答案: