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

i have bootstrap button standard bootstrap dropdown. styling lot remove color , make transparent @ times. when click it, has grey inner shadow. remove it.

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: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 div top of page*/ padding: 100px; /*or whatever value give 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><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> 

example of of dropdown:

how make inner shadow go away?

edit: looks bit inner box-shadow showing in grey blue outline has gone away , need remove grey inner box shadow.

the answer not hard once figured out not blue outline staying anymore , grey box shadow.

i had 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;  }