Html 从 Firefox 中的范围输入元素中删除虚线轮廓
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18794026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove dotted outline from range input element in Firefox
提问by alexandrrr
Firefox, since version 23, natively supports the <input type="range">element, but I couldn't figure out how to remove the dotted outline. The following CSS has no effect:
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;
}
Does anyone have any idea how to fix this issue in Firefox?
有没有人知道如何在 Firefox 中解决这个问题？
Example: http://jsfiddle.net/pF37g/
回答by
Unfortunately, you can't! (update; you now can)
不幸的是，你不能！（更新；你现在可以）
It's a bug in Firefox and there is no work-around to fix this besides from fixing the source base itself (see below).
这是 Firefox 中的一个错误，除了修复源库本身（见下文）之外，没有解决方法可以解决这个问题。
Also see Jonathan Watt's blog(who is working on this):
另请参阅 Jonathan Watt 的博客（正在研究此内容）：
Known issues:
- the default CSS styled appearance still needs work, and native theming (giving the slider the appearance of the operating system's theme) is still to come ...
已知的问题：
- 默认的 CSS 样式外观仍然需要工作，并且本机主题（使滑块具有操作系统主题的外观）仍然存在......
In a reply to a comment in his blog about this very same issue he states:
在对他博客中关于同一问题的评论的回复中，他说：
Right now you can't - sorry. I've filed bug 932410to make that possible.
现在你不能 - 抱歉。我已经提交了错误932410以使这成为可能。
At the moment of writing there appear to be no progress on this and it's not known when a official fix will be available.
在撰写本文时，这方面似乎没有任何进展，也不知道何时会有正式修复程序可用。
Update
更新
Since this answer was posted the bug has been fixed. You can now use (as stated in other answers, but I include it here for completeness):
自从发布此答案以来，该错误已得到修复。您现在可以使用（如其他答案中所述，但为了完整起见，我将其包含在此处）：
input[type=range]::-moz-focus-outer {
border: 0;
}
回答by dugokontov
It canbe done with new version of Firefox. As stated here, this bug is fixed. So it is possible to hide outer dotted border. To do so, set ::-moz-focus-outer's border to 0, like this:
它可以与Firefox的最新版本来完成。如前所述这里，这个错误是固定的。因此可以隐藏外部虚线边框。为此，将::-moz-focus-outer的边框设置为 0，如下所示：
input[type=range]::-moz-focus-outer {
border: 0;
}
Here is working example: http://jsfiddle.net/n2dsc/1/
这是工作示例：http: //jsfiddle.net/n2dsc/1/
In webkit browsers outer line will appear if -webkit-appearance: none;is set. To remove it, just set :focus's outline to none, like this:
如果-webkit-appearance: none;设置了，在 webkit 浏览器中会出现外线。要删除它，只需将:focus的轮廓设置为无，如下所示：
input[type=range]:focus {
outline: none;
}
Here is working example: http://jsfiddle.net/8b5Mm/1/
这是工作示例：http: //jsfiddle.net/8b5Mm/1/
回答by ausi
As Ken already pointed out, there is no way to remove the outline. However, there is a work-around to "hide" the outline if you know the background-color of the parent element. Assuming a white background the following CSS would hide the dotted outline:
正如肯已经指出的那样，没有办法去除轮廓。但是，如果您知道父元素的背景颜色，则有一种解决方法可以“隐藏”轮廓。假设背景为白色，以下 CSS 将隐藏虚线轮廓：
input[type=range] {
border: 1px solid white;
outline: 2px solid white;
outline-offset: -1px;
}
Your updated example: http://jsfiddle.net/9fVdd/15/
您更新的示例：http: //jsfiddle.net/9fVdd/15/
回答by Ryan Wheale
If you can settle for a wrapping element (it's likely you already have a wrapping LIor P), you can use FireFox-only CSS to position the input out of view and reposition the track/thumb in view.
如果您可以使用环绕元素（很可能您已经有了一个环绕元素LI或P），您可以使用仅限 FireFox 的 CSS 将输入定位在视野之外，并将轨道/拇指重新定位在视野中。
- Note 1- don't try to use
translateX- I think FireFox uses that to actually slide the thumb - so stick withtranslateY - Note 2- Be sure to test with keyboard navigation. You should only move the input by the smallest amount possible to get the dotted lines out of sight. If you position it waaay far away (
translateY(-1000em)) - then you will break usability for keyboard navigation.
- 注意 1- 不要尝试使用
translateX- 我认为 FireFox 使用它来实际滑动拇指 - 所以坚持使用translateY - 注意 2- 请务必使用键盘导航进行测试。您应该只将输入移动尽可能小的量，以使虚线看不见。如果你把它放在远处 (
translateY(-1000em)) - 那么你会破坏键盘导航的可用性。
Here ya go:
给你：
HTML
HTML
<span class="range-wrap"><input type="range" /></span>
CSS
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);
}
回答by MDW
To make it complete: The Bug has been fixed and now it's working with:
使其完整：该错误已修复，现在正在使用：
input[type=range]::-moz-focus-outer { border: 0; }
to remove all outlines from all input-tags use:
要从所有输入标签中删除所有轮廓，请使用：
input::-moz-focus-inner, input::-moz-focus-outer { border: none; }
source: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7
回答by Shalom Aleichem
Dotted outline is not an issue, it's browser's way to show the input element is selected. What you can do is set tabIndexto -1 which will prevent your inputelement from taking focus on tab and, consequently, from having the outline:
虚线轮廓不是问题，它是浏览器显示输入元素被选中的方式。您可以做的是设置tabIndex为 -1，这将防止您的input元素将焦点放在选项卡上，从而防止出现大纲：
<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>
But after doing this you will lose some keyboard accessibility. It is better to have inputelement keyboard accessible.
但是这样做之后，您将失去一些键盘可访问性。最好有input元素键盘可访问。
Here is the fiddle: http://jsfiddle.net/pF37g/14/
这是小提琴：http: //jsfiddle.net/pF37g/14/
回答by Francis Kim
If any custom styling is applied to input[type='range']then Firefox use a different model (beta)to render the range input.
如果应用了任何自定义样式，input[type='range']则 Firefox 将使用不同的模型（测试版）来呈现范围输入。
You can see the 2 different models here:
您可以在这里看到 2 种不同的模型：
Currently I do not believe it is currently possible to have a custom CSS styled input range box in Firefox to adhere to outline: 0;as of Firefox 27.0
目前，我认为目前无法在 Firefox 中使用自定义 CSS 样式的输入范围框来遵守outline: 0;Firefox 27.0
回答by TLindig
You can not. It seams to be a bug in Firefox.
你不能。这似乎是 Firefox 中的一个错误。
It makes two outlines for the range element. One you can influence by css setting and a second, which is resistant against any manipulation.
它为范围元素制作了两个轮廓。您可以通过 css 设置影响一个，另一个可以抵抗任何操作。
I set the outline visible to show the issues:
input[type='range']:focus {
outline: 5px solid green;
}
我将轮廓设置为可见以显示问题：
input[type='range']:focus {
outline: 5px solid green;
}
Here you can see it:
在这里你可以看到它：
回答by Milad
I have little research in config section of mozilla add this too
我对 mozilla 的配置部分的研究很少，也添加了这个
:-moz-any-link:focus {
outline: none;
}
a, a:active, a:visited, a:hover {
outline: 0;
}
then
然后
:focus {
outline: none;
}
then
然后
::-moz-focus-inner {
border: 0;
}
回答by Faizan
Here comes the solution
解决方案来了
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
