html - 从 Firefox 中的输入类型 ="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 问题中第二个答案中的“将其隐藏在边框后面”技巧，但随后白色边框位于范围拇指的顶部，就像图中的虚线轮廓一样。 outline-offset 也不会向左或向右延伸，因此末尾的虚线仍然显示。

Answer 1

输入[type='range']::-moz-focus-outer { border: 0;