Bootstrap 3 remove hover input styling - html

Question

I have a simple input that I am having trouble with trying to remove the hover/active styling on.
In the image below, I am trying to remove the grey background/slight border that it is adding when it is clicked. I just want it to be white, nothing should change when it is click or hovered over.
Here is a fiddle: https://jsfiddle.net/carlhussey/tfrpncu7/6/
<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>
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}
.filterOptions:hover,
.filterOptions:active{
background-color: white;
border-color: #ccc;
}

Answer 1

If you open DevTools and execute the dropdown button you'll see an event fire as far as .open being added to the input-group-btn class that you can the over ride as needed.
Working Example:
.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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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 2

Try:
.input-group .dropdown-toggle.filterOptions {
background: #fff!important;
}

Answer 3

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .open>.dropdown-toggle.btn-default:hover{
background-color: transparent;
}
Try above code

Answer 4

here is the fiddle
https://jsfiddle.net/6qbteca6/
.dropdown-menu {
right: 0;
left: auto;
}
.input-group .dropdown-toggle.filterOptions {
border-left: 0;
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 */
}
.input-group .dropdown-toggle.filterOptions{
background:none !important;
border-color:#ccc !important;
}
.filterOptions:hover,
.filterOptions:active{
background-color: white;
border-color: #ccc;
}

Answer 5

Try by adding this css
.filterOptions:active, .open > .dropdown-toggle.btn-default {
background-color: transparent !important;
border-color: #ccc !important;
}