Bootstrap3 CSS样式输入

我正在尝试使用下拉列表创建一个搜索字段.我一直在尝试使用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;
}

这是我设置的小提琴：https://jsfiddle.net/carlhussey/tfrpncu7/

以下是您需要完成所需内容的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 */
}

这是它的样子：

我继续更新你的小提琴：

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