Search code examples
cssfirefoxcss-selectorsstylishpalemoon

How to remove focus rings from Firefox, what is the correct selector for the main window?

EDIT: The focus rings are caused by the Grab And Drag plugin. See my answer below for the fix.

Whenever I click on any part of a web pages' body, Firefox (Pale Moon 27.2.1) puts focus rings around the perimeter of the browser window (see screenshot). It does this on every web page.

This question has been asked a million times over the years, but it seems none of the old solutions work anymore. See here and here.

I can tell you a few things that do and do NOT work:

The "wildcard" selector removes the focus rings with the following declarations, but obviously breaks all websites:

* {
    /* WORKS */
    color: transparent !important;
    text-shadow: 0 0 0 #000 !important;

    /* ALSO WORKS */
    border: 1px solid white !important;
    outline: 2px solid white !important;
    outline-offset: -1px !important;
}

These selectors do NOT work:

:focus
::-moz-focus-inner
:-moz-focusring
:active
:focus
::-moz-focus-outer

These declarations do not work:

border: 0 !important;
border: none !important;
outline: 0 !important;
outline: none !important;
-moz-outline-style: /* NOPE */;

Screenshot:

Reddit / Google in Firefox showing inner focus rings

I'm using Stylish to style all web pages with the rules above (@-moz-document url-prefix( "http://" ), url-prefix( "https://")). I'm also using another Stylish ruleset that looks like this and works fine for everything else:

:active, :focus, ::-moz-focus-inner {
    outline: 0 !important;
}

a:link, a:visited, a:hover, a:active {
    outline: 0 !important;
}

radio * {
    border-width: 0 1px 0 0 !important;
    border-style: dotted !important;
    border-color: transparent !important;
}
Solution

  • This does the trick, although I'm still wondering what Firefox is "coloring?"

    EDIT: The focus rings are caused by the Grab And Drag addon >= v.3.2.*. For me, the fix was to use Grab And Drag v.3.1.9.1, which does not display any focus rings on the body of web pages when clicking and dragging on the body.

    @-moz-document regexp( "https?://.*" ) {
    html {
        /**
         * Remove focus rings that appear on the perimeter of the web page
         * body when placing cursor in any form field input, then clicking
         * anywhere in the body.
         *
         * This css rule breaks a lot of websites!
         *
         * - Works on html tag, but not body tag.
         * - Does not work with "outline: 0 !important;" or
         *   "border: 0 !important;"
         * - This declaration is not necessary:
         *   "text-shadow: 0 0 0 #000 !important;"
         */

        color: transparent !important;
    }
}