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

Question

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)

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 '11 at 07:56
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. — Markus Graf, Mar 13 '19 at 13:19

score 815 · Accepted Answer · edited Oct 15 '13 at 23:02

815

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

edited Oct 15 '13 at 23:02

Josh Crozier

233,099
56
391
304

answered Oct 13 '08 at 22:46

16

Yea it works for me too! Now how can it be done for selects ? – 7wp Feb 03 '10 at 19:54
16

Note that this also works for input (e.g. input::-moz-focus-inner {border:0;}) – El Yobo May 31 '10 at 07:03
yeah i needed this for input. i never seen the double colon used in CSS before. interesting. – Aug 17 '10 at 09:44
15

Purpose of the double colon: (CSS3 notation) http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/ – sholsinger Nov 03 '10 at 19:09
+1 Thank you so much for this CSS!! I could not find out how to do this... I was using `-moz-outline-style:` and it would not work and the text in my button was still being outlined. But this fixes it totally. Thanks so much!! – Nathan Sep 06 '11 at 23:26
I am testing this in a real world scenario with JAWs. I will get back to you all with any findings or hacks. Trust me there has been a lot of them. Whoever thought it would be a good idea to do an accessible tabs interface inside a modal is.. well.. need I say more. – John Drefahl Nov 01 '11 at 19:52
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;}` – machineaddict May 02 '13 at 11:18
5

:focus {outline:none;} ::-moz-focus-inner {border:0;} would be less specific – Ben Jun 13 '13 at 12:17
In Firefox 23.0.1 it only works combined with `background: none`. http://jsbin.com/UMuRAso/1/edit – NVI Sep 20 '13 at 19:36
This doesn't work for `area`, For that I used this: http://stackoverflow.com/a/12888335/2615737 – Francisco Corrales Morales Apr 16 '14 at 15:14
doesn't work for me with the button selector. I had to use [type="button"] to get it to work. Idk why. – Xitcod13 Apr 19 '14 at 23:59
@7wp, if u used scss/less it would look like `button { ::-moz-focus-inner { border: 0; } }` – Gherman May 07 '14 at 10:29
@machineaddict that solved this issue for me, even though I am not using bootstrap.css - thank you! – user1380540 Jan 22 '15 at 16:37
How is this style applied inline? – Frederik Krautwald May 22 '15 at 23:41
I suggest to add the pseudo class `:-moz-focusring` – Mateng Aug 30 '17 at 11:02
in response to @7wp the SELECTS are done like that: `code select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } ` – Stan Oct 17 '17 at 14:58
however this method is not advisable to be used in production as specified [here](https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner) – Vineet Mar 14 '20 at 16:56
@JoshCrozier is there any other way to do it? since this method is not recommended for production – Vineet Mar 17 '20 at 07:17

score 328 · Answer 2 · edited Apr 24 '18 at 00:31

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

edited Apr 24 '18 at 00:31

Carl Vitullo

853
6
15

answered Oct 02 '10 at 05:01

Anderson Custódio

3,297
1
14
2

9

Thanks, this worked for me when the correct answer didn't. I must have been using the wrong selector. – irl_irl Oct 08 '10 at 18:27
Thanks for this, will this remove it on links and buttons too? – Nathan Sep 06 '11 at 23:28
3

This one is best! The accepted answer is only for ` – Ron van der Heijden Feb 12 '13 at 11:16
Wonderful answer, this applies to everything instead of just – eclipsis Nov 23 '13 at 01:57
Nice - this also works to prevent the dotted border/outline appearing for table cells once you've clicked on something within it. – John - Not A Number Mar 14 '14 at 17:54
Works for me with only `:focus`, didn't need to use `::-moz-focus-inner` - btw: I used it on links (``) – Xavi Montero May 11 '14 at 01:58
2

Perfect in Mozilla Firefox 30 under Ubuntu (GNU/Linux). – e-info128 Jul 01 '14 at 22:54
Works in FF 36.0.4 on Mac. These will become new standard lines in my reset css. Thx a lot. – Herr_Hansen Jun 08 '15 at 23:39
It's pretty weird that I had only this problem in FF Developper...Anyway thx! – Marcky Oct 18 '15 at 18:31
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 '19 at 08:43
need to add important to override bootstrap.css `:focus {outline:none !important;}` – Gayan Chinthaka May 11 '22 at 13:17

score 50 · Answer 3 · edited Oct 14 '19 at 18:07

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

edited Oct 14 '19 at 18:07

Hugo Manrique

40
3
8

answered Oct 25 '09 at 23:00

chinkchink

517
4
2

You don't need a unit on numbers that are zero. `0px` can be replaced with just `0` – slang Dec 04 '18 at 20:34

score 44 · Answer 4 · edited Jan 14 '16 at 20:06

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!

edited Jan 14 '16 at 20:06

thanksd

54,176
22
157
150

answered Oct 02 '11 at 18:22

foxybagga

4,184
2
34
31

12

Simply `a { outline: none; }` should be sufficient for links. – grant Jan 23 '12 at 23:18
3

here the !important did the trick, the other solutions didn't have that and didn't work. for me. – Cristiano Fontes Mar 19 '12 at 03:54
But often you should use `a { outline: none; }` with `!important` -> `a { outline: none !important; }` – joryl Nov 23 '16 at 09:13

score 23 · Answer 5 · edited Oct 15 '13 at 23:08

23

:focus, :active {
    outline: 0;
    border: 0;
}

edited Oct 15 '13 at 23:08

Josh Crozier

233,099
56
391
304

answered Jun 27 '10 at 23:11

blizzyx

247
2
2

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 '14 at 18:53

score 9 · Answer 6 · edited May 23 '17 at 12:02

[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

It's not working anymore :/ The solution that worked is this one http://stackoverflow.com/a/3844452/925560 — Renato Carvalho, Dec 17 '13 at 21:10

score 9 · Answer 7 · edited May 23 '17 at 12:26

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

edited May 23 '17 at 12:26

Community

1
1

answered Jul 16 '14 at 21:54

Vartox

189
3
12

Same thing here, this is the only solution working on FF 38.0.5 – OlivierH Jun 21 '15 at 17:12
Worked on Firefox 81 for Linux Mint. – Sr. Schneider Oct 02 '20 at 17:24

score 7 · Answer 8 · answered Nov 09 '17 at 06:19

7

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

answered Nov 09 '17 at 06:19

bob

7,539
2
46
42

Perfect, Works in Firefox 72 on linux too! – asdjfiasd Feb 02 '20 at 09:37

score 6 · Answer 9 · edited Jan 14 '16 at 20:33

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!

edited Jan 14 '16 at 20:33

thanksd

54,176
22
157
150

answered Mar 25 '13 at 05:19

Shannon Hochkins

11,763
15
62
95

score 6 · Answer 10 · edited Oct 31 '21 at 05:50

6

Tested on Firefox 46 and Chrome 49 using this code.

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

Before (white dots are visible )

After ( White dots are invisible )

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

input[type=text] {
  outline: none !important;
}

edited Oct 31 '21 at 05:50

Nimantha

6,405
6
28
69

answered Apr 27 '16 at 17:57

Madan Sapkota

25,047
11
113
117

The `!important` was needed for me to override Firefox's stylesheet. Cheers! – Sam A. Horvath-Hunt Apr 18 '18 at 11:31
Tried all the above solutions but none worked till I see this solution - Thanks – rob Apr 21 '23 at 10:56

score 6 · Answer 11 · edited Oct 15 '13 at 23:27

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

edited Oct 15 '13 at 23:27

Josh Crozier

233,099
56
391
304

answered Sep 16 '08 at 11:06

Vitaly Sharovatov

922
1
8
12

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 ? – Durgaprasad Nov 16 '13 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 '14 at 14:39
@AndyM This answer does work. The solution presents in other answers is for CSS and only works for individual sites. – Rahil Wazir Oct 13 '14 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 '14 at 12:07

score 5 · Answer 12 · answered Jan 13 '17 at 09:42

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.

answered Jan 13 '17 at 09:42

Abhay Singh

1,595
1
23
40

score 4 · Answer 13 · edited Oct 15 '13 at 23:04

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.

score 4 · Answer 14 · answered Aug 08 '15 at 13:23

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

score 3 · Answer 15 · edited Oct 11 '11 at 18:24

3

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

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

edited Oct 11 '11 at 18:24

Jason Plank

2,336
5
31
40

answered Nov 17 '09 at 17:31

wavded

31
2

score 3 · Answer 16 · answered Dec 22 '13 at 16:14

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

score 3 · Answer 17 · edited Aug 28 '17 at 03:23

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

edited Aug 28 '17 at 03:23

magi182

3,427
1
15
23

answered Aug 04 '16 at 11:38

kurumkan

2,635
3
31
55

score 3 · Answer 18 · edited Jan 14 '16 at 20:29

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

edited Jan 14 '16 at 20:29

thanksd

54,176
22
157
150

answered Jul 09 '11 at 13:38

Dave Everitt

17,193
6
67
97

score 3 · Answer 19 · edited Oct 11 '11 at 18:24

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}

edited Oct 11 '11 at 18:24

Jason Plank

2,336
5
31
40

answered May 13 '09 at 11:12

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 06 '15 at 10:21
@Hkan Yeah, I agree. But Firefox's outline is ugly especially when it is around a custom focus border. – Nathan Nov 06 '15 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 06 '15 at 17:27

score 2 · Answer 20 · answered Sep 16 '08 at 11:08

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.

answered Sep 16 '08 at 11:08

AlexWilson

1,179
1
9
16

score 1 · Answer 21 · answered Dec 30 '13 at 04:47

1

This works on firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

answered Dec 30 '13 at 04:47

DPP

12,716
3
49
46

score 1 · Answer 22 · answered May 27 '16 at 11:15

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

answered May 27 '16 at 11:15

Syed Waqas Bukhary

5,130
5
47
59

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 }``` – Jonas Sandstedt May 07 '20 at 14:06

score 1 · Answer 23 · answered Jun 09 '16 at 05:24

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.

score 1 · Answer 24 · answered Mar 30 '19 at 17:36

1

Yep don't miss !important

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

answered Mar 30 '19 at 17:36

Riwaj Chalise

637
1
13
27

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 '19 at 02:24

score 0 · Answer 25 · edited Oct 11 '11 at 18:20

0

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

edited Oct 11 '11 at 18:20

Jason Plank

2,336
5
31
40

answered Jan 07 '10 at 16:19

usual

9
1

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

25 Answers25

So, do not forget to add `!important`

Linked

Related

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

25 Answers25

So, do not forget to add !important

Linked

Related

So, do not forget to add `!important`