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

Question

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:

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

This is tagged Firefox, but I don't see the issue in FF (Not gonna install Palemoon ATT). .. In your first code group, try replacing `*` with `html` and/ or `body`. — Brock Adams, Mar 25 '17 at 02:10
With your help, I answered the question below. If you'd like to copy/paste the code in my answer to your own answer, I'll mark yours as correct. — Jeff, Mar 25 '17 at 11:37
Thanks, but you've got an answer and I don't need the rep *that* much. ;) — Brock Adams, Mar 25 '17 at 18:58

Jeff · Accepted Answer · 2017-03-26T14:49:15.443

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

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

1 Answers1