Bootstrap3 CSS Style Input

Question

I am trying to make a search field with a dropdown inside. I have been trying to use bootstrap's input group to give the illusion that the button is inside the field.

This is what I am trying to accomplish in the screenshot below:

This is what I have so far:

I am trying to figure out how to get the dropdown menu to move over to the far right of the search field and get that carrot to show as well.

Any tips on adjusting the position of the menu as well as making that dropdown button have no color on hover?

<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;
}

Here is a fiddle I have set up: https://jsfiddle.net/carlhussey/tfrpncu7/

Answer 1

Here is the CSS you need to accomplish what you indicated you wanted:

.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 */
}

Here is what it looks like:

I went ahead and updated your Fiddle:

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

Answer 2

You should be using input-group-lg along with input-group and dropdown-menu-right to position the dropdown menu correctly. For the other CSS use pseudo elements.

Working Example: (The level of specificity is so the example works on Stackoverflow.)

.div-cntr {
  margin-top: 100px;
  text-align: center;
  max-width: 700px;
  /*for example only*/
  background: red;
  min-height: 300px;
  /*for example only*/
}
.form .open>.dropdown-toggle.filterOptions.focus,
.form .open>.dropdown-toggle.filterOptions:focus,
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control,
.form .input-group.input-group-lg>.input-group-btn>.filterOptions {
  border: 1px solid #ccc;
  border-left: 0;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
}
.form .dropdown-menu.dropdown-menu-search {
  top: 60px;
  right: 110px;
  border-radius: 0;
  border: 0;
  background: #fff;
}
.form .dropdown-menu.dropdown-menu-search:after {
  top: -15px;
  right: 10px;
  position: absolute;
  content: '';
  border-width: 0px 15px 15px 15px;
  border-style: solid;
  border-color: #fff transparent;
  height: 0;
  width: 0;
}
.form .form-control.toolSearch,
.form .form-control.toolSearch:focus {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #ccc;
  border-right: 0;
}
.form .input-group-btn .btn.btn-search,
.form .input-group-btn .btn.btn-search.active {
  border-radius: 0;
  border: 1px solid #ccc;
  border-left: 0;
}
.form .input-group-btn .btn.btn-search:hover,
.form .input-group-btn .btn-search:focus {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-left: 0;
  border-radius: 0;
  background: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container div-cntr">
  <div class="form-group form">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control toolSearch" 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 dropdown-menu-right dropdown-menu-search">
          <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>
          <li>
            <a href="#" class="small" data-value="option3" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 3</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option4" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 4</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option5" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 5</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option6" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 6</a>
          </li>
        </ul>
        <button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>