css - Bootstrap3 CSS 样式输入

Question

我正在尝试创建一个带有下拉菜单的搜索字段。我一直在尝试使用 bootstrap 的输入组来产生按钮在字段内的错觉。

这就是我在下面的屏幕截图中想要完成的:

这是我目前所拥有的:

我正在尝试弄清楚如何让下拉菜单移动到搜索字段的最右侧并让那个胡萝卜也显示出来。

关于调整菜单位置以及使下拉按钮在悬停时没有颜色的任何提示？

<div class="container div-cntr">
   <div class="form-group">
      <div class="input-group">
         <input type="text" class="form-control input-lg" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
         <div class="input-group-btn">
            <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button>
            <ul class="dropdown-menu">
                <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
                <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
            </ul>
         </div>
      </div>
      <br />
      <button type="button" class="btn btn-default btn-lg">Search</button>
   </div>
</div>

-

.div-cntr {
    left: 50%;
    margin-left: -350px;
    margin-top: -150px;
    min-height: 150px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 700px;
}
.filterOptions{
    border-left: 0px;
}
.btn-lg {
    line-height: 1.22;
}
#toolSearch:focus {
    outline:none;
}

这是我设置的 fiddle :https://jsfiddle.net/carlhussey/tfrpncu7/

Answer 1

这是您需要的 CSS 来完成您所指出的您想要的:

.dropdown-menu {
  right: 0; /* Align dropdown-menu to right instead of left */
  left: auto;
}

.input-group .dropdown-toggle.filterOptions {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}

这是它的样子:

我继续更新您的 Fiddle:

https://jsfiddle.net/tfrpncu7/3/