我正在使用 twitter bootstrap,并且想在搜索框上创建一个下拉菜单。我正在尝试模拟 gmail 的搜索栏,其中输入搜索框末尾有一个插入符号,可以单击它来打开表单。
当单击插入符号时,我尝试使用 bootstrap 的下拉列表来显示 div。但是我无法像谷歌那样将插入符号放在输入框中。
查看谷歌的代码,我发现他们有一个没有边框的输入框,放置在下拉插入符号旁边,嵌入在带边框的 div 中。
我无法覆盖 Bootstrap 输入框的边框属性。有人试过吗?
下面是我的代码 -
<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>
最佳答案
使用类来帮助覆盖,例如:
<input class="the-input" type="text" />
然后去掉那个边框:
input.the-input {
border: none transparent;
-webkit-box-shadow: none;
box-shadow: none;
filter:-; /* for IE */
}
关于css - 如何使用 bootstrap 创建类似 google 的下拉搜索框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12513149/