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

从版本23开始，Firefox本身就支持该<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/

不幸的是，你不能！（更新；您现在可以）

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

另请参阅乔纳森·瓦特（Jonathan Watt）的博客（正在为此工作）：

已知的问题：

• 默认的CSS样式外观仍需要工作，并且原生主题（使滑块具有操作系统主题的外观）仍将出现...

在对博客中有关同一问题的评论中，他指出：

现在你不能-对不起。我已提交错误932410，以实现这一目标。

在撰写本文时，似乎尚无进展，尚不清楚何时可提供正式修复。

更新资料

自从发布此答案以来，该错误已得到修复。您现在可以使用（如其他答案所述，但出于完整性考虑，在此包括在内）：

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

它可以与Firefox的最新版本来完成。如前所述这里，这个错误是固定的。因此可以隐藏外部虚线边框。为此，将::-moz-focus-outer的border设置为0，如下所示：

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

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

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

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

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

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

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

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

如果您可以使用包装元素（很可能已经包装了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/

虚线轮廓不是问题，它是浏览器显示输入元素已选中的方式。您可以将设置tabIndex设为-1，这将防止您的input元素将焦点放在tab上，从而导致轮廓不正确：

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

但是这样做之后，您将失去一些键盘可访问性。最好可以使用input元素键盘。

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

如果将任何自定义样式应用于input[type='range']Firefox ，则Firefox将使用其他模型（测试版）来呈现范围输入。

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

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

目前，我不认为outline: 0;Firefox 27.0以后的Firefox中可以使用自定义CSS样式的输入范围框

使其完整：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

你不能。它似乎是Firefox中的错误。

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

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

在这里您可以看到它：

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

我在mozilla的config部分几乎没有研究，也将其添加

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

然后

:focus {
   outline: none;
}

然后

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

解决方案来了

:focus {
    outline:none;
}

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