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

Posted 2023-03-05

【中文标题】从 Firefox 中的范围输入元素中删除虚线轮廓

【英文标题】：Remove dotted outline from range input element in Firefox

【发布时间】：2013-09-18 14:19:00

【问题描述】：

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 中解决这个问题吗？

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

【问题讨论】：

你能给我一把小提琴吗？这里没有看到任何大纲：jsfiddle.net/tGUAR

Don't remove the outline from links and form elements (outlinenone.com)（不过我也没有看到。W7/Fx23）

@Forty-Two 并不意味着您不能自己删除它们或重新设置它们的样式。

如果您删除了所有您最初发布的样式（也就是说，不设置输入样式），Firefox for Mac 中根本没有轮廓。

@alexandrrr Firefox 27.0 (Windows)，您的示例中没有大纲。

【参考方案1】：

虚线轮廓不是问题，它是浏览器显示输入元素被选中的方式。您可以将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/

【讨论】：

不幸的是，我仍然可以看到虚线轮廓（Mac，Firefox 23）。

我还能看到轮廓，Linux，FF 74

【参考方案2】：

解决方案来了

:focus 
    outline:none;


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

【参考方案3】：

如果对 input[type='range'] 应用了任何自定义样式，那么 Firefox 将使用不同的模型 (beta) 来呈现范围输入。

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

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

目前我认为目前在 Firefox 中不可能有一个自定义 CSS 样式的输入范围框来遵守 Firefox 27.0 中的outline: 0;

【讨论】：

它没有，而且该规则一开始就没有意义。 ::-moz-focus-inner 和 :-moz-focusring 将导致任何基于 WebKit 的浏览器忽略整个内容，并且 Firefox 显然不支持 -webkit-* 属性。如果该小提琴适合您，您可能正在使用浏览器/操作系统/其他环境，该环境不会在滑块元素上显示焦点环。

@Charmander 选择器来自原始问题。

啊，感谢您指出这一点。所以你添加了一堆 WebKit 属性来解决一个关于移除 Firefox 焦点环的问题，然后呢？ Firefox 不是基于 WebKit 的浏览器。它的渲染引擎是 Gecko，这里的两组前缀的组合，如前所述，将导致两者同样无效。

我链接了 JSFiddle

谢谢，我看到了。如果我的前两个词不够清楚，我很抱歉，但它不起作用，也没有理由它应该起作用。如果它对您有用，请确认这是因为您的 CSS 规则，而不是您的环境其余部分的影响。这尤其是如果您在基于 WebKit 的浏览器上浏览，因为正如我在上面再次提到的，这个问题与 Firefox 有关。

【参考方案4】：

很遗憾，你不能！ （更新；您现在可以）

这是 Firefox 中的一个错误，除了修复源库本身（见下文）之外，没有其他解决方法可以解决此问题。

另请参阅 Jonathan Watt 的 blog（正在研究此问题）：

已知问题：

默认的 CSS 样式外观仍需改进，原生主题（为滑块提供操作系统的外观） 主题）还在继续……

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

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

在撰写本文时，这方面似乎没有任何进展，也不知道什么时候可以提供官方修复。

更新

自从发布此答案以来，该错误已得到修复。您现在可以使用（如其他答案所述，但为了完整起见，我将其包含在此处）：

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

【讨论】：

谢谢；你完全正确。 （不过，我对此发表了评论。）

【参考方案5】：

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

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

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

【讨论】：

是的，它有效。这是第一个有效的解决方法。恭喜！

但是你有跳跃元素，因为添加了边框。没有该边框，滑块将被裁剪。看这里：jsfiddle.net/pF37g/100

样式必须适用于所有状态 (input[type=range])，而不仅仅是 :focus，正如您在我的 JsFiddle 中看到的那样

你应该使用border: 1px solid transparent；为了避免未来的设计问题

@FacundoColombier 边框用于为轮廓添加 1px 空间。轮廓覆盖在边框上，所以边框颜色无关紧要。

【参考方案6】：

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

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

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

在这里你可以看到它：

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

【参考方案7】：

如果您可以接受一个环绕元素（很可能您已经有一个环绕 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/

【讨论】：

如果您在页面中切换并且范围输入获得焦点，则视口将滚动到外部定位的元素。见jsfiddle.net/pF37g/102

@ausi - 这是一个很好的观点。我的建议是将其 移出视线 (fiddle)。我认为 100em 有点矫枉过正，但这是一个很好的观点，尤其是对于像我这样习惯于输入 text-indent: -1000em 这样的东西的人来说。 注意 translateX 破坏了拇指的可用性（可能 b/c FF 正在使用 translateX 来定位拇指），所以不要尝试 translateX。

【参考方案8】：

我对 Mozilla 的配置部分几乎没有研究，也添加了这个

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

然后

:focus 
   outline: none;

然后

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

【讨论】：

也许您应该在回答（错误地）之前尝试您提出的解决方案。

【参考方案9】：

它可以用新版本的 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/

【讨论】：

我可以确认::-moz-focus-outer 按预期工作。这应该是公认的答案。

【参考方案10】：

为了使它完整：该错误已被修复，现在它正在使用：

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