我知道还有其他类似的问题，但我已经尝试了他们建议的所有内容，但均无济于事。这是一个不同的问题从 Firefox 中的范围输入元素中删除虚线轮廓 https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox当我问是什么导致了这个流氓轮廓时 - 上一个问题回答了如何获得如下所示的彩色轮廓。
这个问题（从 Firefox 中的范围输入元素中删除虚线轮廓 https://stackoverflow.com/questions/18794026/remove-dotted-outline-from-range-input-element-in-firefox）提到了 Firefox 的 bug -https://bugzilla.mozilla.org/show_bug.cgi?id=932410 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 and :focus具有相同的属性 - 绿色轮廓，覆盖橙色。
-moz-appearance: none;在元素上不执行任何操作::-moz-focus-inner.
您可以看到范围拇指有红色边框，范围轨道有蓝色边框，但仍然有虚线轮廓。我尝试了上述问题第二个答案中的“将其隐藏在边框后面”技巧，但白色边框位于范围拇指的顶部，就像图片中的虚线轮廓一样。轮廓偏移也不会向左或向右延伸，因此末端的虚线仍然显示。
输入[type='范围']::-moz-focus-outer { 边框：0; }
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
