Remove Dotted Outline from Range Input Element in Firefox

Removing dashed lines in range input in Firefox

Use ::-moz-focus-outer selector.

input[type=range]::-moz-focus-outer {
  border: 0
}

How to remove Firefox's dotted outline on BUTTONS as well as links?

button::-moz-focus-inner {
  border: 0;
}

Can't get rid of dotted outline in Firefox links?

You need to apply the styles to the <a> tag (your latter two CSS rules are wrong because you've put the <a> tag inside <img>.

This works for me:

a:active,
a:focus {
  outline: none;
  -moz-outline-style: none;
}

Or, for only inside the element with ID ul (not the best name, by the way):

#ul a:active,
#ul a:focus {
  outline: none;
  -moz-outline-style: none;
}

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

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

---

Related Topics