9

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:

enter image description here

The rendered input in the browser looks like this:

enter image description here

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.

bondydaa
  • 263
  • 3
  • 7
  • Welcome to Stack Overflow. In the future, it would be best to link to a working example instead a of just images of the problem. Cheers and good luck. – Patrick M Oct 15 '14 at 23:55
  • If there is a new answer, it should be posted as an answer to the old question. We do not want to have copies of the same question around, with different sets of answers. – Jukka K. Korpela Oct 16 '14 at 06:01
  • 1
    @PatrickM thanks, I wish I could, can't because of my client. – bondydaa Oct 16 '14 at 15:26
  • @JukkaK.Korpela I will repost my question in the previously mentioned question, thanks. – bondydaa Oct 16 '14 at 15:27

1 Answers1

18

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

o_k
  • 181
  • 1
  • 3