Удалить фокус Outline из типа ввода = «диапазон» в Firefox

Question

Я знаю, что есть другие вопросы, подобные этому, но я пробовал все, что они предложили, безрезультатно. Это другой вопрос, чем Remove dotted outline from range input element in Firefox, поскольку я спрашиваю, что вызывает этот контур изгоев - предыдущий вопрос отвечает, как получить цветные контуры, показанные ниже.

Этот вопрос SO (Remove dotted outline from range input element in Firefox) упоминает ошибку firefox - https://bugzilla.mozilla.org/show_bug.cgi?id=932410, но с тех пор он был отмечен как разрешенный, но у меня все еще есть эта проблема.

Входной CSS является:

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

Вычисленное CSS из моего браузера:

Визуализированное вход в браузере выглядит следующим образом:

От моего t esting выглядит как :-moz-focusring и :focus - это то же свойство - зеленый контур, переписывает оранжевый.

-moz-appearance: none; на элемент ничего не делает вместе с ::-moz-focus-inner.

Вы можете видеть, что дальность действия большого пальца имеет красную границу, а дальномер имеет синюю рамку, но до сих пор сохраняется пунктирная линия. Я попробовал трюк «спрятать его за границей» из второго ответа в вышеупомянутом вопросе SO, но затем белая рамка находится поверх диапазона, как пунктирная контур на картинке. Смещение контура также не распространяется слева или справа, поэтому пунктирные линии на конце все еще отображаются.

Answer 1

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