title: How to remove focus rings from Firefox, what is the correct selector for the main window?
body: <p><strong>EDIT:</strong> The focus rings are caused by the <a href="https://addons.mozilla.org/en-US/firefox/addon/grab-and-drag/versions/" rel="nofollow noreferrer">Grab And Drag plugin</a>. See my answer below for the fix.</p>
  
  <p>Whenever I click on any part of a web pages' body, Firefox <a href="https://www.palemoon.org/" rel="nofollow noreferrer">(Pale Moon 27.2.1)</a> puts focus rings around the perimeter of the browser window (see screenshot). It does this on every web page.</p>
  
  <p>This question has been asked a million times over the years, but it seems none of the old solutions work anymore. See <a href="https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links">here</a> and <a href="https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox">here</a>.</p>
  
  <p>I <em>can</em> tell you a few things that do and do NOT work:</p>
  
  <p>The "wildcard" selector removes the focus rings with the following declarations, but obviously breaks all websites:</p>
  
  <pre><code>* {
      /* 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;
  }
  </code></pre>
  
  <p>These selectors do NOT work:</p>
  
  <pre><code>:focus
  ::-moz-focus-inner
  :-moz-focusring
  :active
  :focus
  ::-moz-focus-outer
  </code></pre>
  
  <p>These declarations do not work:</p>
  
  <pre><code>border: 0 !important;
  border: none !important;
  outline: 0 !important;
  outline: none !important;
  -moz-outline-style: /* NOPE */;
  </code></pre>
  
  <p>Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/7kiyP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7kiyP.png" alt="Reddit / Google in Firefox showing inner focus rings"></a></p>
  
  <p>I'm using Stylish to style all web pages with the rules above (<code>@-moz-document url-prefix( "http://" ), url-prefix( "https://")</code>). I'm also using another Stylish ruleset that looks like this and works fine for everything else:</p>
  
  <pre><code>: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;
  }
  </code></pre>