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

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/

23424 次浏览
小开

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

小开

解决办法来了

:focus {
outline:none;
}


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

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

你可以在这里看到两个不同的模型:

Http://jsfiddle.net/pf37g/75/

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

小开

不幸的是，你不能! (更新; 现在可以)

这是 Firefox 中的一个 bug，除了修复源代码本身之外没有其他解决方法(见下文)。

也可以看看 Jonathan Watt 的 博客(他正在做这方面的工作) :

已知问题:

  • 默认的 CSS 样式的外观仍然需要工作，本机主题化(给滑块的外观操作系统的 主题)仍然是未来..。

在回复他博客中关于这个问题的评论时，他说:

现在不行，抱歉，我已经申请了 932410窃听器 有可能。

在写这篇文章的时候，似乎没有任何进展，也不知道什么时候会有官方的解决方案。

更新

自从这个答案发布以来，bug 已经被修复了。您现在可以使用(如其他答案中所述，但为了完整起见，我在这里包含了它) :

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

正如肯已经指出的，没有办法删除的轮廓。但是，如果您知道父元素的背景颜色，则有一个“隐藏”轮廓的解决方案。假设背景为白色，下面的 CSS 将隐藏虚线轮廓:

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

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

小开

你不能，这看起来像是 Firefox 的一个 bug。

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

我设置了可见的大纲，以显示问题: Input [ type = ‘ range’] : focus { 轮廓: 5px 纯绿色; }

这里你可以看到:

Http://jsfiddle.net/pf37g/97/

小开

如果你可以满足于一个包装元素(很可能你已经有了一个包装 LI或者 P) ，你可以使用 FireFox-only CSS 将输入定位到视图之外，并将音轨/拇指重新定位到视图中。

  • 注意1 -不要尝试使用 translateX-我认为火狐实际上使用它来滑动拇指-所以坚持使用 translateY
  • 注2 -确保使用键盘导航进行测试。您应该只移动输入 用尽可能少的剂量把虚线画得看不见。如果你把它放在很远的地方(translateY(-1000em)) ，那么你会破坏键盘导航的可用性。

给你:

超文本标示语言

<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/

小开

我在 mozilla 的配置部分几乎没有研究添加这一点

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

那么

:focus {
outline: none;
}

那么

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

它使用新版本的 Firefox 完成 可以。如 给你所述，此错误已修复。因此，可以隐藏外部虚线边界。为此，将 ::-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/

小开

让它完整: 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


提交答案