I know that there are other similar questions, but I tried everything that they suggested, to no avail. This is a different question than Removing the dashed line from a range input element in Firefox , since I ask what causes this rogue outline - the previous question answers how to get the color below.
This SO question ( Remove the dashed line from a range input element in Firefox ) mentions a firefox error - https://bugzilla.mozilla.org/show_bug.cgi?id=932410 , but since then it has been marked as resolved, but I have everything there is still this problem.
CSS input:
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; }
Computed CSS from my browser:
The displayed input in the browser is as follows:
From my testing, it looks like :-moz-focusring and :focus - this is the same property - the green outline overwrites the orange.
-moz-appearance: none; nothing is done on the element along with ::-moz-focus-inner .
You can see that the range - the thumb has a red frame, and the rangefinder has a blue frame, but the dashed line still remains. I tried the “hide it abroad” trick from the second answer in the above SO question, but then the white frame is on top of the range, like the dashed outline in the picture. The contour offset does not extend either left or right, so the dotted lines at the end are still displayed.
source share