Remove Focus Outline from Input type="range" in Firefox

Question

I know there are other questions like this but I've tried everything they have suggested to no avail. This is a different question than Remove dotted outline from range input element in Firefox as I'm asking what is causing this rogue outline - the previous question answers how to get the colored outlines shown below.

This SO question (Remove dotted outline from range input element in Firefox) mentions the firefox bug - https://bugzilla.mozilla.org/show_bug.cgi?id=932410 but it has since been marked as resolved but I'm still having this issue.

The input CSS is:

input[type=range]:-moz-focusring {
    outline: 1px solid orange;
}
input[type=range]:focus {
    outline: 1px solid green;
}

input[type=range] {
    -moz-appearance: none;
}
input[type=range]:focus::-moz-range-thumb {
    outline: 1px solid red;
}
input[type=range]:focus::-moz-range-track {
    outline: 1px solid blue;
}
input[type='range']::-moz-focus-inner {
    outline: 1px solid red;
}

The computed CSS from my browser is:

The rendered input in the browser looks like this:

From my testing it looks like :-moz-focusring and :focus are the same property - green outline, overwrites the orange.

-moz-appearance: none; on the element does nothing along with ::-moz-focus-inner.

You can see the range-thumb has a red border and range-track has a blue border but there is still the dotted outline. I tried the 'hide it behind a border' trick from the 2nd answer in the above SO question but then the white border is on top of the range-thumb like the dotted outline is in the picture. The outline-offset also does not extend on the left or right so the dotted lines on the end still show.

Answer 1

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