CODEWITHSUNDEEP
cssfirefoxbrowserwebbrowser-control
Tomkay
Tomkay

Reputation: 5160

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

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

Upvotes: 18

Views: 15303

Answers (8)

Lucky
Lucky

Reputation: 17345

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

Upvotes: 1

Rachid O
Rachid O

Reputation: 14002

this is more accurate:

a { outline: none!important; }

Upvotes: 2

zxbEPREF
zxbEPREF

Reputation: 202

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 }

Upvotes: 1

MythThrazz
MythThrazz

Reputation: 1647

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

Upvotes: 11

Junior Mayhe
Junior Mayhe

Reputation: 16411

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, ...

Upvotes: 0

Rushyo
Rushyo

Reputation: 7604

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.

Upvotes: 0

Ioannis Karadimas
Ioannis Karadimas

Reputation: 7896

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

element { outline: none; }

Upvotes: 22

benhowdle89
benhowdle89

Reputation: 37464

a { outline: none; }

Upvotes: 14

Related Questions