Bootstrap transparent dropdown

Question

Я хочу добавить раскрывающееся окно для загрузки в мою форму. Это фактическая кнопка, которую я хочу быть прозрачной, а не список, который падает при нажатии кнопки.

Вот пример того, что у меня есть:

Так что правильно, что является прозрачным. Но иногда, когда я зависать над ним, а затем парить от него синеет, как это:

Вот мой 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> 

Как не остановить ли я его от синего?

Answer 1

Попробуйте использовать:

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