Unwanted outline or border around button when clicked

Question

I have a styled button on my website. But when I click it, it creates an unwanted border or outline (I don't know which). How can I remove that border? Below is all the code that pertains to the button.

Answer 1

Use either of these CSS Styles

a:active,
a:focus,
input,
input:active,
input:focus {
    outline: 0;
    outline-style:none;
    outline-width:0;
}  
a:active,
a:focus,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: none;
} 

OR

:focus {outline:none;} ::-moz-focus-inner {border:0;}

Once the CSS Style part is done, then you might also need to set the IE-Emulator. Update your web applications web.config file and include below key.

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <clear />
      <add name="X-UA-Compatible" value="IE=7; IE=9; IE=8; IE=5;" />
    </customHeaders>
  </httpProtocol>

</system.webServer>