7

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

2 回答 2

6

您应该需要的一切都是这样的：请参阅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-button 类添加到外部跨度。

于 2013-05-14T06:54:52.113 回答
0

我知道这是一个老问题，但我觉得Shion 的答案并不是我想要的。因此，经过一番试验后，我想出了这个不会让您闪烁按钮的方法：

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

活生生的例子：道场

于 2019-12-17T14:52:03.993 回答