1

http://i45.tinypic.com/34pezdj.jpg

The outline appears when tab through all element in the web. This happen only in Firefox (not appear in Chrome, Opera, Safari)

I use Firebug console to detect what element is on focus by: document.activeElement then it shows 

>>> document.activeElement

<html>

Then tried:

html {outline: 0}

But this outline still appear.

How can we get rid of this one?

p.s: I try tab through all page of other pages like Google, Facebook. There is no outline like this.

An Phung
  • 409
  • 7
  • 23

2 Answers2

1

here is your solution

:focus {outline:none;}
::-moz-focus-inner {border:0;}
Faizan
  • 766
  • 2
  • 7
  • 19
  • Please do not duplicate answers across questions. – Rob W Jan 04 '14 at 10:38
  • ohh... i just trying to help people so that they easily find their solution – Faizan Jan 04 '14 at 10:41
  • If you want to make it easier, just mark a question as a duplicate of the question with the canonical answer. Once you reach 3k reputation, you can [vote to close questions](http://stackoverflow.com/help/privileges/close-questions) as a duplicate of another. If you do not have that amount of reputation, just post a comment on the question, e.g. `Related: [How to remove Firefox's dotted outline on BUTTONS as well as links?](http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links)` – Rob W Jan 04 '14 at 10:44
0

EDIT: Seems like there was some confusion here, so I shall correct myself:

Since there is no other element than <body>, FF can only focus <body>, thus the dotted line around it. (screenshot)

Try to add an element / elements to body:

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='haha.css'>
    </head>
    <body>
        <a href="#" title="">I'm an example.</a>
        <a href="#" title="">Me too.</a>
    </body>
</html>

Now, you can cycle focus through the elements by pressing the tab key and you should see that dotted line moving to the active element.

ORIGINAL POST

You're probably looking for border instead.

html {
    border: none;
}

Depending on the other css on the page, you might have to do this:

html, body {
    border: none;
}

Hope it helps.

Fabian Lauer
  • 511
  • 2
  • 12
  • Is there a style attribute applied to body? – Fabian Lauer Feb 17 '13 at 08:38
  • There is no other style. Here are the files test.html: [ ] haha.css: [ html, body { border: none; outline: 0; }] – An Phung Feb 17 '13 at 08:48
  • hmm, when I keep on tabbing, the outline around the page still appears. http://i45.tinypic.com/20uwigw.jpg – An Phung Feb 17 '13 at 09:20
  • because it's a built-in feature in browsers. you won't get rid of it. and even of you could disable it, you shoul not do that: the user expects that line to show him where the focus is. if it's not there anymore: bad. http://www.spotlessinteractive.com/articles/usability-research/usability-user-behaviours/user-expectations-are-important.php. – Fabian Lauer Feb 17 '13 at 09:24