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

Here comes the solution

:focus {
    outline:none;
}

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

Answer 2

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

Answer 3

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/

Answer 4

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/