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

通过twitter引导，创建搜索风格的输入小部件非常简单：

同样，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>

。过滤器关闭{
浮动：无；
位置：相对位置；
左：5em；
顶部：1.25em；
z指数：3；
}
{{filter\u form.last\u name}

在尝试重新发明轮子之前，是否有任何现有的javascript库可以在带有x按钮的输入中转换输入？类似于selected.js的东西是否用于此目的？ 或者有什么建议可以让我做得更好

非常感谢，

退房

基本上做你想做的事

---

你正朝着正确的方向前进

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

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

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

过滤器：
×

---

有关完整代码，请查看此帖子：

基本上，关键是在清除元件上使用

相对定位和
左：-20px

例如：

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

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

x
span#用户清除
{
位置：相对位置；
左：-20px；
}

这样，跨距将与左侧的输入重叠。您可以向其附加事件处理程序以清除输入字段。
您是否尝试过使用像素而不是EMs？这可能会使它的位置更可靠谢谢你的提示，我会试试这个，让你知道。我用一个简单的方法简化了@karthikr CSS。