Question

使用twitter bootstrap，可以直接创建搜索样式输入窗口小部件：

enter image description here

x也适用于Twitter引导程序，但是将x放在那个位置，需要一些CSS微调。

我设法让x在那个位置，但它不是很可靠。凭借响应式设计和不同的分辨率，x完全取代了。

.filter-close {
    float: none;
    position: relative;
    left: 5em;
    top: 1.25em;
    z-index: 3;
}

<form action="." method="get" class="form-search">
 <a class="close filter-close" href="#">x</a>                                           
    <div class="input-append">                  
        {{filter_form.last_name}}<button type="submit" class="btn"><i class='icon-filter'> </i></button>                </div>                          
</form>

在尝试重新发明轮子之前，是否有任何现有的javascript库可以在输入带有x按钮的情况下转换输入？为此目的，像Chosen.js这样的东西？或者任何建议我如何以更好的方式做到这一点？

非常感谢，

Answer 1

查看this post

This fiddle基本上可以做你想做的事。

你朝着正确的方向前进。

Answer 2

通过对某些引导代码和一些JavaScript的一些更改，您可以实现此目的，实际上您可以在文本框中放置任何您想要的控件。这是一个例子：

enter image description here

这是用于生成它的最终标记：

<div class="composite-input">
    <span class="focus-input">Filter:</span> 
    <input type="text" /> 
    <span>×</span>
</div>

有关完整代码，请查看此帖子：http://www.simplygoodcode.com/2013/08/placing-text-and-controls-inside-text.html

Answer 3

基本上关键是在清算元素上使用relative定位和left:-20px。

例如：

<input type="text" /><span id="userclear">x</span>

span#userclear
{
  position: relative;
  left: -20px;
}

这样，跨度将与其左侧的输入重叠。您可以附加一个事件处理程序来清除输入字段。

如何在输入窗口小部件中定位x以清除内容？

3 个答案: