css - Bootstrap transparent dropdown -

i add transparent bootstrap dropdown to form. actual button want transparent, not list drops down when clicking button.

here example of have:

so correct, transparent. when hover on , hover away it turns blue this:

here css:

.input-control {     height: 5rem;     width: 49%;     display: inline-flex;     background-color: transparent;     border-top-style: none;     border-right-style: none;     border-bottom: 1px solid dimgray;     border-left-style: none;     -moz-box-shadow:    none;     -webkit-box-shadow: none;     box-shadow:         none;     border-radius: 0;  }  button.input-control:hover {     background-color: none;     background: none; }  .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {     /* color: #fff; */     background-color: transparent;     border-color: transparent; }  .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {     color: #fff;     background-color: transparent;     border-color: dimgray; }  .btn-primary:hover {     color: #fff;     background-color: transparent;     border-color: dimgray; }  dropdown > button {     background:none;     border:none;     box-shadow:none; } 

html:

<div id="find-vegan-products-page" style="height:900px;">         <div class="form-background">                <form role="form" style="padding: 40px;">                 <div class="form-group">                     <div class="dropdown">                         <button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown">dropdown example                         <span class="caret"></span></button>                         <ul class="dropdown-menu">                             <li><a href="#">html</a></li>                             <li><a href="#">css</a></li>                             <li><a href="#">javascript</a></li>                         </ul>                       </div>                  </div>                 <div class="form-group">                     <input type="text" class="form-control input-control no-box-shadow" placeholder="city">                 </div>                 <button type="submit" class="btn btn-default">submit</button>             </form>         </div>     </div> 

how stop ever turning blue?

try using:

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {     color: #fff;     background-color: transparent;     border-color: dimgray;  }