Bootstrap3 CSS Style Input - css

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><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</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" /> Option 1</a>
</li>
<li>
<a href="#" class="small" data-value="option2" tabIndex="-1">
<input type="checkbox" /> Option 2</a>
</li>
<li>
<a href="#" class="small" data-value="option3" tabIndex="-1">
<input type="checkbox" /> Option 3</a>
</li>
<li>
<a href="#" class="small" data-value="option4" tabIndex="-1">
<input type="checkbox" /> Option 4</a>
</li>
<li>
<a href="#" class="small" data-value="option5" tabIndex="-1">
<input type="checkbox" /> Option 5</a>
</li>
<li>
<a href="#" class="small" data-value="option6" tabIndex="-1">
<input type="checkbox" /> 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>

Answer 3

Here's a Fiddle with the position of the dropdown set, and the button with a white background on `:active'. Let me know if this is what you were looking for.
https://jsfiddle.net/tobyl/4p41p3kg/2/
Added CSS:
.dropdown-menu {
left: auto;
right: 0;
}
.open > .dropdown-toggle.btn-default:active, .open > .dropdown-toggle.btn-default:focus {
background-color: #fff;
}

Answer 4

I'll start by answering the second part of your question
Making that dropdown button have no color on hover
Chrome dev-tools (right click any element of the page and select Inspect element) can help a lot when it comes to styling elements under certain states (like hover). To see which style rule is applied during hover we can force the hover state on the button through dev-tools. We see that .btn-default is applying
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
Since this button has the following class precedence
<button class="btn btn-default btn-lg dropdown-toggle filterOptions"> (classes to the right override rules from classes to the left)
We can override the hover styles of .btn-default by making a rule for the hover state of filterOptions.
.filterOptions:hover {
background-color: white;
border-color: #ccc;
}
Adjusting the position of the menu as well as
Again by inspecting the dropdown element in dev-tools we can see that the correct style rule to override the default positioning and make the dropdown position to the right would be:
.open>.dropdown-menu {
right: 0;
left: initial;
}
Updated fiddle:
https://jsfiddle.net/tfrpncu7/4/
Remember, css has no scoping what so ever so it's a good idea to always apply new non-bootstrap classes when styling a specific element.
If your project is large, consider using a css naming convention like BEM to keep the risk of naming collisions low.