Remove (inner-box-shadow - Edited) on Bootstrap Button Click
<p>I have a bootstrap button for a standard bootstrap dropdown. I am styling it a lot to basically remove any color and make it transparent at all times. But when I click it, it has a grey inner shadow. I would like to remove it.</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:focus,.btn:active {
   outline: none !important;
}

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

.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;
}



.form-background {
    background: rgba(149, 246, 102, .5);
}

#find-vegan-products-page {
margin-top: 100px; /*separate the div from top of the page*/
padding: 100px; /*or whatever value to give the div space */
}
</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>Example of the look of the dropdown:</p>

<p><a href="https://i.stack.imgur.com/PmwHd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PmwHd.jpg" alt="enter image description here"></a></p>

<p>How do I make the inner shadow go away?</p>

<p><strong>EDIT: It looks a bit like an inner box-shadow that is showing in grey so the blue outline has probably fully gone away and now I need to remove the grey inner box shadow.</strong></p>