How to Remove Firefox'S Dotted Outline on Buttons as Well as Links

How to remove Firefox's dotted outline on BUTTONS as well as links?

button::-moz-focus-inner {
  border: 0;
}

Remove outline from button in firefox

In your case, you need to add background:transparent to the button element. Adding this, along side border:none should solve the problem, if not, see this question.

Example Here

button {
    background:transparent;
    border:none;
    outline:none;
}

Remove dotted line around clicked button

that's the focus. Among other things it is important for accessibility (it shows what element is currently selected/has been clicked), so actually you shouldn't remove it.

If you still want to remove it, add this to your stylesheet:

:focus {
  outline: none !important;
}

How do I remove the dotted line on my image button when I click it in firefox?

Try this:

button::-moz-focus-inner {
    border:0;
}

button can be replaced with whatever selector for which you want to disable the behavior.

P.S: It also works without a selector by just using ::-moz-focus-inner.

JSFiddle Demo

Can't get rid of dotted outline in Firefox links?

You need to apply the styles to the <a> tag (your latter two CSS rules are wrong because you've put the <a> tag inside <img>.

This works for me:

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

Or, for only inside the element with ID ul (not the best name, by the way):

#ul a:active,
#ul a:focus {
  outline: none;
  -moz-outline-style: none;
}

CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

Provided that your menu items are not input elements (say, buttons), you can hide it using CSS, like so:

element { outline: none; }

---

Related Topics