title: Bootstrap transparent dropdown
body: <p>I would like to add a transparent bootstrap dropdown to to my form. Its is the actual button that I want to be transparent, not the list that drops down when clicking the button. </p>
  
  <p>Here is an example of what I have:</p>
  
  <p><a href="https://i.stack.imgur.com/kO5xh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kO5xh.jpg" alt="enter image description here"></a></p>
  
  <p>So that is correct, that is transparent. But occasionally when I hover over it and then hover away from it it turns blue like this:</p>
  
  <p><a href="https://i.stack.imgur.com/qiGt2.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qiGt2.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my css:</p>
  
  <pre><code>.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&gt;.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&gt;.dropdown-toggle.btn-primary.focus, .open&gt;.dropdown-toggle.btn-primary:focus, .open&gt;.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 &gt; button {
      background:none;
      border:none;
      box-shadow:none;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="find-vegan-products-page" style="height:900px;"&gt;
          &lt;div class="form-background"&gt;
  
  
  
              &lt;form role="form" style="padding: 40px;"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="dropdown"&gt;
                          &lt;button class="btn btn-primary dropdown-toggle input-control no-box-shadow" type="button" data-toggle="dropdown"&gt;Dropdown Example
                          &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                        &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control input-control no-box-shadow" placeholder="City"&gt;
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How do I stop it from ever turning blue?</p>