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

Question

This click indicator is a disgusting piece for my recent web projects.. I hate this! - How can I say to my Firefox browser that he should not mark the clicked object?

alt text

Removing the outline entirely without providing some sort of :focus or :active visual indication throws a road block in your accessibility. Those users who use keyboards to navigate your site rely on those outlines to indicate which element they've tabbed to. You can style them, but I wouldn't remove them entirely. — zxbEPREF, Jan 10 '13 at 19:15
Comment above by clrux is dead on. It's sometimes preferable to add a focus indicator to a child element for better color contrast and visual accessibility. Hopefully that's the kind of stuff people are trying implement here. Just removing the focus indicator it is a big no no. — cage rattler, Oct 02 '15 at 21:02

score 22 · Accepted Answer · answered Nov 26 '10 at 14:14

22

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

element { outline: none; }

answered Nov 26 '10 at 14:14

Ioannis Karadimas

7,746
3
35
45

score 14 · Answer 2 · answered Nov 26 '10 at 14:13

14

a { outline: none; }

answered Nov 26 '10 at 14:13

benhowdle89

36,900
69
202
331

1

In my case I had to add !important to there to get it to stick. – George Mauer Oct 17 '13 at 21:40

score 11 · Answer 3 · answered Apr 12 '13 at 16:51

11

Nothing helped (Firefox 20.1) until this:

a:focus, a:active,
button,
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 {
    outline: none !important;
}

answered Apr 12 '13 at 16:51

MythThrazz

1,629
17
25

It's a moving target folks. You'll need to add `border: none !important;` as well for this to work now. Annoying. – cage rattler Oct 02 '15 at 20:58

score 2 · Answer 4 · answered Jan 08 '15 at 16:07

2

this is more accurate:

a { outline: none!important; }

answered Jan 08 '15 at 16:07

Rachid O

13,013
15
66
92

score 1 · Answer 5 · answered Feb 21 '14 at 17:59

To be more specific to @ioannis-karadimas, you could remove the outline on hover (assuming mouse input) but leave it for focus (assuming keyboard input). This would retain most of the accessibility. That being said:

element:hover { outline: none; }
element:focus { // leave the focus }

score 1 · Answer 6 · edited May 23 '17 at 10:30

1

Based on this post, adding outline:0 will also do the trick.

.selector{ outline:0; }

If you don't want to have the border shown to any element in your website, try the following,

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

edited May 23 '17 at 10:30

Community

1
1

answered Feb 06 '16 at 13:31

Lucky

16,787
19
117
151

score 0 · Answer 7 · answered Jun 23 '12 at 23:44

0

Crazy solution:

input[type="button"]::-moz-focus-inner{
    border: 1px dotted transparent;
}

but I dislike it.

Indeed Firefox 12.0 is marking a dotted on input type="button" when I click it. outline:none does nothing for :active, :focus, ...

answered Jun 23 '12 at 23:44

Junior Mayhé

16,144
26
115
161

score 0 · Answer 8 · answered Nov 26 '10 at 14:23

0

You might hate it, but your customers might not. Generally speaking overriding browser functionality is a great way to confuse users and inspire them not to visit your site.

answered Nov 26 '10 at 14:23

Rushyo

7,495
4
35
42

Yeah I agree. A consistent user experience is the a and o for a good website.. but some websites need to break those usabillity rules. – Tomkay Nov 26 '10 at 14:25
Well in the given context I can see no obvious justification (from the screenie). – Rushyo Dec 08 '10 at 09:50

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

8 Answers8

Linked