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 th
If you are talking about the dotted line in Firefox, I think what you're looking for is this:
button::-moz-focus-inner { border: 0; }
This is a thread on the topic: How to remove Firefox's dotted outline on BUTTONS as well as links?
Please don't remove the outlines on focus-styles, this makes your site less accessible to your keyboard-only and low-vision users.
If you choose to add something like :focus { outline: none; }
to your stylesheets, also add you owns styles for focused elements.
Reading: Never remove CSS outlines
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>
outline: none;
This worked for me in Chrome.
It's an outline.
Use outline:none;
on :focus pseudo-class to remove it.
Worked well for me.