在Firefox中从输入类型=“范围”中删除焦点轮廓

Question

我知道还有其他这样的问题，但我已经尝试了他们所建议的一切无济于事。这是一个与Remove dotted outline from range input element in Firefox不同的问题，因为我正在询问造成这个流氓大纲的原因 - 上一个问题解答了如何获得如下所示的彩色轮廓。

这个问题（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是：

浏览器中呈现的输入如下所示：

从我的测试中看起来:-moz-focusring和:focus是相同的属性 - 绿色轮廓，覆盖橙色。

元素上的

-moz-appearance: none;与::-moz-focus-inner一起不执行任何操作。

您可以看到范围拇指有一个红色边框，范围轨道有一个蓝色边框但仍有虚线轮廓。我试着把它隐藏在边境后面＆＃39;从上面的SO问题中的第二个答案获得技巧但随后白色边框位于范围的顶部 - 拇指就像图中的虚线轮廓一样。轮廓偏移也不会在左侧或右侧延伸，因此末端的虚线仍然显示。

Answer 1

输入[type =＆＃39; range＆＃39;] :: - moz-focus-outer {border：0; }