CODEWITHSUNDEEP
htmlcssfirefoxtabsoutline
An Phung
An Phung

Reputation: 409

Remove outline of <html> when tab in Firefox

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.

Upvotes: 1

Views: 1535

Answers (2)

Faizan
Faizan

Reputation: 776

here is your solution

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

Upvotes: 1

Fabian Lauer
Fabian Lauer

Reputation: 511

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.

Upvotes: 0

Related Questions