Question

Firefox，自版本23以来，原生支持<input type="range">元素，但我无法弄清楚如何删除虚线轮廓。以下CSS无效：

input[type='range'], 
input[type='range']:focus, 
input[type='range']:active, 
input[type='range']::-moz-focus-inner, 
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

有没有人知道如何在Firefox中修复此问题？

示例：http://jsfiddle.net/pF37g/

Answer 1

不幸的是，你做不到！ （更新;您现在可以）

这是Firefox中的一个错误，除了修复源代码本身之外，没有解决方法（见下文）。

另见Jonathan Watt的blog（正在研究此事）：

已知问题：


默认的CSS样式外观仍然需要工作，并且本机主题（给滑块提供操作系统的外观）   主题）还有待......

在回复他博客中关于同一问题的评论时，他说：

现在你不能 - 抱歉。我提交了错误932410来做到这一点可能的。

在撰写本文时，似乎没有任何进展，并且不知道什么时候可以获得官方修复。

<强>更新

由于此答案已发布，因此该错误已得到修复。您现在可以使用（如其他答案中所述，但为了完整性，我将其包括在内）：

input[type=range]::-moz-focus-outer {
    border: 0;
    }

Answer 2

可以使用新版本的Firefox完成。如上所述here，此错误已得到修复。因此可以隐藏外部虚线边框。为此，请将::-moz-focus-outer的边框设置为0，如下所示：

input[type=range]::-moz-focus-outer {
    border: 0;
}

以下是工作示例：http://jsfiddle.net/n2dsc/1/

在webkit浏览器中，如果设置了-webkit-appearance: none;，则会出现外线。要删除它，只需将:focus的大纲设置为无，如下所示：

input[type=range]:focus {
    outline: none;
}

以下是工作示例：http://jsfiddle.net/8b5Mm/1/

Answer 3

正如肯已经指出的那样，没有办法删除大纲。但是，如果您知道父元素的背景颜色，则有一种解决方法可以“隐藏”轮廓。假设白色背景，以下CSS将隐藏虚线轮廓：

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

您的更新示例：http://jsfiddle.net/9fVdd/15/

Answer 4

如果您可以选择包装元素（可能已经包装LI或P），则可以使用仅限FireFox的CSS将输入定位到视图之外并重新定位轨道/拇指在视野中。

注意1 - 不要尝试使用translateX - 我认为FireFox使用它来实际滑动拇指 - 所以坚持使用translateY
注2 - 务必使用键盘导航进行测试。您应该只将输入移动到可能的最小量，以使虚线看不见。如果你将它定位在远处（translateY(-1000em)） - 那么你将破坏键盘导航的可用性。

这里你去：

<强> HTML

<span class="range-wrap"><input type="range" /></span>

<强> CSS

.range-wrap {
    overflow: hidden;
}
input[type='range'] {
    -moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
    -moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
    -moz-transform: translateY(3em);
}

http://jsfiddle.net/pF37g/98/

Answer 5

虚线轮廓不是问题，它是浏览器显示输入元素的方式。您可以做的是将tabIndex设置为-1，这会阻止您的input元素关注制表符，从而避免使用大纲：

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

但是这样做之后你将失去一些键盘可访问性。最好让input元素键盘可访问。

这是小提琴：http://jsfiddle.net/pF37g/14/

Answer 6

如果对input[type='range']应用了任何自定义样式，则Firefox会使用其他模型(beta)来呈现范围输入。

您可以在此处看到2种不同的型号：

http://jsfiddle.net/pF37g/75/

目前我不相信目前可以在Firefox中使用自定义CSS样式的输入范围框，以便在Firefox 27.0之后加入outline: 0;

Answer 7

要完成它：Bug已经修复，现在它正在使用：

input[type=range]::-moz-focus-outer { border: 0; }

从所有输入标签中删除所有轮廓使用：

input::-moz-focus-inner, input::-moz-focus-outer { border: none; }

来源：https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7

Answer 8

你做不到。它变成了Firefox中的一个错误。

它为范围元素制作了两个轮廓。一个你可以通过css设置和第二个来影响，这可以抵抗任何操纵。

我将轮廓设置为可见以显示问题： input[type='range']:focus { outline: 5px solid green; }

在这里你可以看到它：

http://jsfiddle.net/pF37g/97/

Answer 9

我对mozilla的配置部分的研究很少添加

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

然后

:focus {
   outline: none;
}

然后

::-moz-focus-inner {
      border: 0;
}

Answer 10

解决方案

:focus {
    outline:none;
}

::-moz-focus-inner {
    border:0;
}

从Firefox中的范围输入元素中删除虚线轮廓

10 个答案: