Firefox, since version 23, natively supports the <input type="range">
element, but I couldn’t figure out how to remove the dotted outline. The following CSS has no effect:
input[type='range'],
input[type='range']:focus,
input[type='range']:active,
input[type='range']::-moz-focus-inner,
input[type='range']:-moz-focusring {
border: 0;
outline: none;
}
Does anyone have any idea how to fix this issue in Firefox?
Example: https://jsfiddle.net/pF37g/
Best Answer
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):
In a reply to a comment in his blog about this very same issue he states:
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):