Remove dotted outline from range input element in Firefox

Question

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/

Can u show a fiddle? Not seeing any outline here: http://jsfiddle.net/tGUAR/ — Yuriy Galanter, Sep 13 '13 at 19:46
[Don't remove the outline from links and form elements (outlinenone.com)](http://www.outlinenone.com/) (I don't see one either, though. W7/Fx23) — FelipeAls, Sep 13 '13 at 19:49
Those dotted outlines are an accessibility **feature**, not a bug :) — Forty-Two, Sep 13 '13 at 19:53
@Forty-Two doesn't mean that you shouldn't be able to remove them or re-style them yourself. — Nijikokun, Jan 16 '14 at 23:14
Relevant bug is https://bugzilla.mozilla.org/show_bug.cgi?id=932410. Seeing as it *is* a bug, I don’t expect anyone to answer with something better than a fix, but you never know. — , Feb 05 '14 at 00:59
if you remove all of those styles you initially posted (that is, leave the input unstyled) there is no outline at all in Firefox for Mac. — ralph.m, Feb 05 '14 at 03:14
@alexandrrr Same here. Firefox 26.0 Mac. No outline when input is not styled - http://jsfiddle.net/pF37g/89/ — misterManSam, Feb 05 '14 at 03:49
@alexandrrr Firefox 27.0 (Windows), no outline in your example. — Itay Gal, Feb 05 '14 at 07:48
A different bug (the one this question was likely prompted by, the one causing a border to be displayed regardless of system theming) was fixed for Mac and Windows in usual cases. Please try a different environment with no default focus theme. — , Feb 05 '14 at 19:06
Confirmed that @dugokontov's solution works - could you accept that solution for future googlers? — jcuenod, Feb 09 '16 at 17:49

score 108 · Answer 1 · edited Jan 05 '19 at 17:02

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

Thanks; you’re entirely correct. (I *have* commented about it, though.) — , Feb 05 '14 at 04:02

score 27 · Answer 2 · answered Jun 13 '14 at 10:36

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/

I can confirm `::-moz-focus-outer` works as expected. This should be the accepted answer. — Bogdan, Sep 12 '14 at 16:40

ausi · Answer 3 · 2014-10-21T09:35:31.827

18

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/

edited Oct 21 '14 at 09:35

answered Feb 09 '14 at 00:04

ausi

7,253
2
31
48

Yes, it works. That is the first workaround that works. Congratulations! – TLindig Feb 10 '14 at 07:19
But you got jumping element, because of the added border. Without that border, the slider will be cropped. see here: http://jsfiddle.net/pF37g/100/ – TLindig Feb 10 '14 at 07:27
3

The styles have to be applied for all states (`input[type=range]`), not only for `:focus`, as you can see in my JsFiddle – ausi Feb 10 '14 at 07:43
you should use border: 1px solid transparent; for avoid future design issues – Facundo Colombier Feb 10 '14 at 16:58
2

@FacundoColombier the border is used to add 1px space for the outline. The outline is overlying the border, so the border-color doesn't matter. – ausi Feb 10 '14 at 17:23

score 7 · Answer 4 · edited Feb 13 '16 at 12:14

7

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/

edited Feb 13 '16 at 12:14

Daniel Cheung

4,779
1
30
63

answered Feb 09 '14 at 23:40

Ryan Wheale

26,022
8
76
96

2

If you tab through the page and the range input gets the focus, the viewport would scroll to the outside positioned element. See http://jsfiddle.net/pF37g/102/ – ausi Feb 10 '14 at 21:10
1

@ausi - that's a great point. My suggestion would be to move it *just out of sight* ([fiddle](http://jsfiddle.net/pF37g/106/)). I think 100em is a bit overkill, but it's a very good point, especially for people like myself who are accustomed to typing things like `text-indent: -1000em`. **note** `translateX` breaks the thumb usability (likely b/c FF is using translateX to position the thumb), so don't try translateX. – Ryan Wheale Feb 11 '14 at 07:01

Shalom Aleichem · Answer 5 · 2013-09-16T00:33:03.243

3

Dotted outline is not an issue, it's browser's way to show the input element is selected. What you can do is set tabIndex to -1 which will prevent your input element from taking focus on tab and, consequently, from having the outline:

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

But after doing this you will lose some keyboard accessibility. It is better to have input element keyboard accessible.

Here is the fiddle: http://jsfiddle.net/pF37g/14/

edited Sep 16 '13 at 00:33

answered Sep 16 '13 at 00:23

Shalom Aleichem

2,987
2
22
34

2

Unfortunately, I can still see the dotted outline (Mac, Firefox 23). – alexandrrr Sep 16 '13 at 06:20
I can still see the outline, Linux, FF 74 – Choylton B. Higginbottom Apr 02 '20 at 23:27

Francis Kim · Answer 6 · 2014-02-05T02:35:54.523

3

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

edited Feb 05 '14 at 02:35

answered Feb 05 '14 at 01:19

Francis Kim

4,235
4
36
51

It doesn’t, and the rule doesn’t make sense to begin with. `::-moz-focus-inner` and `:-moz-focusring` will cause the whole thing to be ignored by any WebKit-based browser, and `-webkit-*` properties obviously won’t be supported by Firefox. You may be using a browser/operating system/other environment that doesn’t display a focus ring on slider elements to begin with if that fiddle works for you. – Feb 05 '14 at 01:30
@Charmander the selectors are right from the original question. – Francis Kim Feb 05 '14 at 01:31
Ah, thanks for pointing that out. So you’ve added a bunch of WebKit properties for a question asking about removing Firefox focus rings, then? Firefox is not a WebKit-based browser. Its rendering engine is Gecko, and the combination of the two sets of prefixes here, as explained above, will render both equally ineffective. – Feb 05 '14 at 01:32
I linked the JSFiddle – Francis Kim Feb 05 '14 at 01:34
1

Thank you, I saw it. I’m sorry if my first two words weren’t clear enough, but it does not work and there is no reason it should work. If it works for you, please verify that it is because of your CSS rule and not an effect of the rest of your environment. This *especially* if you’re browsing on a WebKit-based browser, because, as I’ve again mentioned above, the question has to do with *Firefox*. – Feb 05 '14 at 01:36
Thank you, but `outline: 0;` is equivalent to `outline: none;` as far as display goes, and shouldn’t offer any advantage over the original question’s CSS. (Indeed, it doesn’t.) – Feb 05 '14 at 01:39

score 3 · Answer 7 · answered Sep 18 '14 at 22:04

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

TLindig · Answer 8 · 2016-02-14T22:40:03.940

0

You can not. It seams to be a bug in Firefox.

It makes two outlines for the range element. One you can influence by css setting and a second, which is resistant against any manipulation.

I set the outline visible to show the issues: input[type='range']:focus { outline: 5px solid green; }

Here you can see it:

http://jsfiddle.net/pF37g/97/

edited Feb 14 '16 at 22:40

answered Feb 09 '14 at 10:57

TLindig

48,010
3
28
31

Milad · Answer 9 · 2014-02-10T21:19:44.560

-1

I have little research in config section of mozilla add this too

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

then

:focus {
   outline: none;
}

then

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

edited Feb 10 '14 at 21:19

answered Feb 10 '14 at 20:24

Milad

719
1
10
28

Perhaps you ought to try your proposed solutions before answering (incorrectly) with them. – Feb 12 '14 at 15:40

score -3 · Answer 10 · edited Feb 10 '14 at 21:27

-3

Here comes the solution

:focus {
    outline:none;
}

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

edited Feb 10 '14 at 21:27

Milad

719
1
10
28

answered Jan 04 '14 at 10:28

Faizan

766
2
7
19

Remove dotted outline from range input element in Firefox

10 Answers10

Linked