html - Bootstrap 3 remove hover input styling -

i have simple input having trouble trying remove hover/active styling on.

in image below, trying remove grey background/slight border adding when clicked. want white, nothing should change when click or hovered over.

here 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 dropdown-menu item hover background-color */ }  .filteroptions:hover, .filteroptions:active{   background-color: white;   border-color: #ccc; } 

if open devtools , execute dropdown button you'll see event fire far .open being added input-group-btn class can on ride 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 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>