524

I can make Firefox not display the ugly dotted focus outlines on links with this:

a:focus { 
    outline: none; 
}

But how can I do this for <button> tags as well? When I do this:

button:focus { 
    outline: none; 
}

the buttons still have the dotted focus outline when I click on them.

(and yes, I know this is a usability issue, but I would like to provide my own focus hints which are appropriate to the design instead of ugly grey dots)

2
  • 2
    It seems like in Firefox 4, elements are no longer getting an outline by default when being clicked, but only when receiving keyboard focus.
    – Geert
    Apr 25, 2011 at 7:56
  • 3
    What you call "ugly" is intended to support accessibility of a website. Keyboard only users can no longer determine which part of the website is in focus when removing this outline. Your website would be completely inaccessible and this should never be the case. Never remove the outline. Better style it in your way. Mar 13, 2019 at 13:19

25 Answers 25

815
button::-moz-focus-inner {
  border: 0;
}
18
  • 16
    Yea it works for me too! Now how can it be done for selects ?
    – 7wp
    Feb 3, 2010 at 19:54
  • 16
    Note that this also works for input (e.g. input::-moz-focus-inner {border:0;})
    – El Yobo
    May 31, 2010 at 7:03
  • 15
    Purpose of the double colon: (CSS3 notation) evotech.net/blog/2007/05/…
    – sholsinger
    Nov 3, 2010 at 19:09
  • 27
    This one did not work for me, because bootstrap.css was making this ugly dotted buttons. Instead I have put :focus {outline:none !important;} May 2, 2013 at 11:18
  • 5
    :focus {outline:none;} ::-moz-focus-inner {border:0;} would be less specific
    – Ben
    Jun 13, 2013 at 12:17
328

No need to define a selector.

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

However, this violates accessibility best practices from the W3C. The outline is there to help those navigating with keyboards.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

11
  • 9
    Thanks, this worked for me when the correct answer didn't. I must have been using the wrong selector.
    – irl_irl
    Oct 8, 2010 at 18:27
  • Thanks for this, will this remove it on links and buttons too?
    – Nathan
    Sep 6, 2011 at 23:28
  • 3
    This one is best! The accepted answer is only for <button>, not <a> nor <input> Feb 12, 2013 at 11:16
  • 2
    Perfect in Mozilla Firefox 30 under Ubuntu (GNU/Linux).
    – e-info128
    Jul 1, 2014 at 22:54
  • 4
    I'll second the note about this breaking accessibility. It is important to remember that not everyone can use a mouse, or see, or see well. That said, per the link (and common sense) hiding the outline only breaks a11y when it's done without ... an author-supplied visual focus indicator -- in other words, it's fine to replace the user-agent style with your own, as OP mentioned. Ideally it should be high-contrast.
    – johncip
    Feb 14, 2019 at 8:43
50

If you prefer to use CSS to get rid of the dotted outline:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }
1
  • You don't need a unit on numbers that are zero. 0px can be replaced with just 0
    – slang
    Dec 4, 2018 at 20:34
44

The below worked for me in case of LINKS, thought of sharing - in case someone is interested.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

Cheers!

3
  • 12
    Simply a { outline: none; } should be sufficient for links.
    – grant
    Jan 23, 2012 at 23:18
  • 3
    here the !important did the trick, the other solutions didn't have that and didn't work. for me. Mar 19, 2012 at 3:54
  • But often you should use a { outline: none; } with !important -> a { outline: none !important; }
    – joryl
    Nov 23, 2016 at 9:13
23
:focus, :active {
    outline: 0;
    border: 0;
}
1
  • 1
    This wasn't specific enough, and I didn't want to use !important or target only a elements, so I found a good option to be body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
    – Ivan Durst
    Mar 28, 2014 at 18:53
9

[Update] This solution doesn't work anymore. The solution that worked for me is this one https://stackoverflow.com/a/3844452/925560

The answer marked as correct didn't work with Firefox 24.0.

To remove Firefox's dotted outline on buttons and anchor tags I added the code below:

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

I found the solution here: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

1
9

Tried most of the answers here, but none of them worked for me. When I realized that I have to get rid of the blue outline on buttons on Chrome too, I found another solution. Remove blue border from css custom-styled button in Chrome

This code worked for me on Firefox version 30 on Windows 7. Perhaps it might help somebody else out there :)

button:focus {outline:0 !important;}
2
  • Same thing here, this is the only solution working on FF 38.0.5
    – OlivierH
    Jun 21, 2015 at 17:12
  • Worked on Firefox 81 for Linux Mint. Oct 2, 2020 at 17:24
8

This will get the range control:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

From: Remove dotted outline from range input element in Firefox

1
  • Perfect, Works in Firefox 72 on linux too!
    – asdjfiasd
    Feb 2, 2020 at 9:37
6

There's no way to remove these dotted focus in Firefox using CSS.

If you have access to the computers where your webapplication works, go to about:config in Firefox and set browser.display.focus_ring_width to 0. Then Firefox won't show any dotted borders at all.

The following bug explains the topic: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

4
  • Thanks it working fine, but i have created so many links previously i never get this problem till now. but now i am in confused so what is the the reason previous to present ? Nov 16, 2013 at 11:42
  • 1
    This is answer is now completely false. Setting the ::-moz-focus-inner {border:0;} as mentioned in several other answers works perfectly.
    – Kelderic
    Sep 12, 2014 at 14:39
  • @AndyM This answer does work. The solution presents in other answers is for CSS and only works for individual sites. Oct 13, 2014 at 12:01
  • 8
    The question asks how it can be done with CSS, and the answer says it can't be. That is false. It can be.
    – Kelderic
    Oct 13, 2014 at 12:07
6

There is many solutions found on the web for this, many of which work, but to force this, so that absolutely nothing can highlight/focus once a use the following:

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

This just adds that little bit extra security & seals the deal!

5

Simply add this css for select box

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

This is working fine for me.

5

Tested on Firefox 46 and Chrome 49 using this code.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Before (white dots are visible )

input with white dots

After ( White dots are invisible ) enter image description here

If you want to apply only on few input fields, buttons etc. Use the more specific code.

input[type=text] {
  outline: none !important;
}
1
  • The !important was needed for me to override Firefox's stylesheet. Cheers! Apr 18, 2018 at 11:31
4

I think you should really know what you're doing by removing the focus outline, because it can mess it up for keyboard navigation and accessibility.

If you need to take it out because of a design issue, add a :focus state to the button that replaces this with some other visual cue, like, changing the border to a brighter color or something like that.

Sometimes I feel the need to take that annoying outline out, but I always prepare an alternate focus visual cue.

And never use the blur() js function. Use the ::-moz-focus-inner pseudo class.

4

In most cases without adding the !important to the CSS code, it won't work.

So, do not forget to add !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}


Or any other code:

button::-moz-focus-inner {
  border: 0 !important;
}
0
3
button::-moz-focus-inner { border: 0; }

Where button can be whatever CSS selector for which you want to disable the behavior.

3

You might want to intensify the focus rather than get rid of it.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 
3
  • 2
    @Nathan a little late but, not having any style in focus state will mess with keyboard experience. you won't be able to know what's focused when you're pressing tab key.
    – Hkan
    Nov 6, 2015 at 10:21
  • @Hkan Yeah, I agree. But Firefox's outline is ugly especially when it is around a custom focus border.
    – Nathan
    Nov 6, 2015 at 17:00
  • @Nathan I completely agree with that. What we should do is provide our own styling for focus state rather than making elements being the same on said state.
    – Hkan
    Nov 6, 2015 at 17:27
3

Remove dotted outline from links, button and input element.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}
0
3

If you have a border on a button and want to hide the dotted outline in Firefox without removing the border (and hence it's extra width on the button) you can use:

.button::-moz-focus-inner {
    border-color: transparent;
}
3

The CSS code below works to remove this:

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

It looks like the only way to achieve this is by setting

browser.display.focus_ring_width = 0

in about:config on a per browser basis.

1

This works on firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
0
1

After trying many options from the above only the following worked for me.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}
1
  • Actually (in Firefox 77 at least), you only need: button:focus { outline: none !important } Or if you like me don't like !important, this works also to override Firefox styling: :root button:focus { outline: none } May 7, 2020 at 14:06
1

Along with Bootstrap 3 I used this code. The second set of rules just undo what bootstrap does for focus/active buttons:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

NOTE that your custom css file should come after Bootstrap css file in your html code to override it.

1

Yep don't miss !important

button::-moz-focus-inner {
 border: 0 !important;
}
1
  • 1
    !important is not part of the answer here, and if your app needs it then you have bigger problems to solve than highlights around your buttons. Always strive to avoid !important.
    – monokrome
    Jul 17, 2019 at 2:24
0

You can try button::-moz-focus-inner {border: 0px solid transparent;} in your CSS.

Not the answer you're looking for? Browse other questions tagged or ask your own question.