如何使用引导程序创建类似谷歌的下拉搜索框

Question

我正在使用 twitter 引导程序，并想在搜索框上创建一个下拉菜单。我正在尝试模拟 gmail 的搜索栏，其中输入搜索框的末尾有一个插入符号，可以单击它来打开一个表单。

当单击插入符号时，我正在尝试使用引导程序的下拉菜单来显示 div。但是我不能像谷歌那样将插入符号放在输入框中。

查看谷歌的代码，我看到他们有一个没有边框的输入框，位于下拉插入符号旁边，嵌入在带边框的 div 中。

我无法覆盖引导输入框的边框属性。有人试过吗？

下面是我的代码-

<div class="input-append dropdown">

  <input type="text" name="puesto" class="input-xlarge noBorder"   placeholder="Email Address"/>    <a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    <b class="caret"></b>   </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">    Hello world   </ul>   <button class="btn" type="button"><i class="icon-filter"></i></button> </div> 

<style type="text/css">   .noBorder {border-top-width: 0px;} </style>

Answer 1

使用类来帮助覆盖，例如：

<input class="the-input" type="text" />

然后去掉那个边框：

input.the-input {
    border: none transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    filter:-;    /* for IE */
}