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

Question

我知道还有其他这样的问题,但我已经尝试了他们所建议的一切无济于事.这是一个与Firefox中的范围输入元素中删除虚线轮廓不同的问题,因为我在问这个流氓轮廓是什么原因 - 上一个问题回答了如何获得如下所示的彩色轮廓.

这个问题(从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 {border:0; }