从 Firefox 中的 Input type="range" 中删除焦点大纲

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 是：

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

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

元素上的-moz-appearance: none; 与::-moz-focus-inner 没有任何作用。

您可以看到 range-thumb 有一个红色边框，range-track 有一个蓝色边框，但仍然有虚线轮廓。我尝试了上述 SO 问题中第二个答案中的“将其隐藏在边框后面”技巧，但是白色边框位于范围拇指的顶部，就像图中的虚线轮廓一样。轮廓偏移也不会向左或向右延伸，因此末端的虚线仍然显示。

Answer 1

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