Remove (inner-box-shadow - Edited) on Bootstrap Button Click - css

Question

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.
Here is my 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: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>.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;
}
.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 */
}
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>HTML</li>
<li>CSS</li>
<li>JavaScript</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>
Example of the look of the dropdown:
How do I make the inner shadow go away?
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.

Answer 1

The answer was not too hard once I figured out it was not the blue outline staying anymore and it was now a grey box shadow.
I just had to add: box-shadow: none; to:
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: transparent;
border-color: dimgray;
box-shadow: none;
}

Answer 2

Try this CSS code:
CSS
:focus {
outline: 0 !important;
}
Now you will never see it again. However, it is maybe not a good idea to remove it entirely.. Users who access your site and using their keyboard to 'walk' through your site never see where they are going. See this blog.

Answer 3

.btn.btn-default:focus {
border:none;
outline:0;
}