Remove dotted outline from range input element in Firefox

Question

Firefox, since version 23, natively supports the element, but I couldn’t figure out how to remove the dotted outline. The following

Answer 1

Unfortunately, you can't! (update; you now can)

It's a bug in Firefox and there is no work-around to fix this besides from fixing the source base itself (see below).

Also see Jonathan Watt's blog (who is working on this):

Known issues:

• the default CSS styled appearance still needs work, and native theming (giving the slider the appearance of the operating system's theme) is still to come ...

In a reply to a comment in his blog about this very same issue he states:

Right now you can't - sorry. I've filed bug 932410 to make that possible.

At the moment of writing there appear to be no progress on this and it's not known when a official fix will be available.

Update

Since this answer was posted the bug has been fixed. You can now use (as stated in other answers, but I include it here for completeness):

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

Answer 2

If you can settle for a wrapping element (it's likely you already have a wrapping LI or P), you can use FireFox-only CSS to position the input out of view and reposition the track/thumb in view.

• Note 1 - don't try to use translateX - I think FireFox uses that to actually slide the thumb - so stick with translateY
• Note 2 - Be sure to test with keyboard navigation. You should only move the input by the smallest amount possible to get the dotted lines out of sight. If you position it waaay far away (translateY(-1000em)) - then you will break usability for keyboard navigation.

Here ya go:

HTML

<span class="range-wrap"><input type="range" /></span>

CSS

.range-wrap {
    overflow: hidden;
}
input[type='range'] {
    -moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
    -moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
    -moz-transform: translateY(3em);
}

http://jsfiddle.net/pF37g/98/

Answer 3

It can be done with new version of Firefox. As stated here, this bug is fixed. So it is possible to hide outer dotted border. To do so, set ::-moz-focus-outer's border to 0, like this:

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

Here is working example: http://jsfiddle.net/n2dsc/1/

In webkit browsers outer line will appear if -webkit-appearance: none; is set. To remove it, just set :focus's outline to none, like this:

input[type=range]:focus {
    outline: none;
}

Here is working example: http://jsfiddle.net/8b5Mm/1/

Answer 4

As Ken already pointed out, there is no way to remove the outline. However, there is a work-around to "hide" the outline if you know the background-color of the parent element. Assuming a white background the following CSS would hide the dotted outline:

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

Your updated example: http://jsfiddle.net/9fVdd/15/

Answer 5

To make it complete: The Bug has been fixed and now it's working with:

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

to remove all outlines from all input-tags use:

input::-moz-focus-inner, input::-moz-focus-outer { border: none; }

source: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7

Answer 6

If any custom styling is applied to input[type='range'] then Firefox use a different model (beta) to render the range input.

You can see the 2 different models here:

http://jsfiddle.net/pF37g/75/

Currently I do not believe it is currently possible to have a custom CSS styled input range box in Firefox to adhere to outline: 0; as of Firefox 27.0