从Firefox的范围input元素中删除虚线轮廓
火狐，从版本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/
不幸的是， 你不能！
这是Firefox中的一个错误，除了修复源代码本身（参见下文）之外，没有解决这个问题的方法。
另请参阅Jonathan Watt的博客 （正在撰写此文章）：
已知的问题：
- 默认的CSS风格的外观仍然需要工作，本地主题（给滑块操作系统的主题外观）仍然是… …
他在博客中回复了他对这个同样的问题的评论：
现在你不能 – 对不起。 我已经提交了错误932410来做到这一点。
在写这篇文章的时候，似乎没有任何进展，并且不知道什么时候才能提供官方修复。
更新
由于这个答案已经发布，错误已经修复。 您现在可以使用（如其他答案中所述，但为了完整性，我将其包括在内）：
input[type=range]::-moz-focus-outer { border: 0; }
它可以用新版本的Firefox完成。 如上所述，这个bug是固定的。 所以可以隐藏外部的虚线边框。 为此，将::-moz-focus-outer的边框设置为0，如下所示：
input[type=range]::-moz-focus-outer { border: 0; }
这里是工作的例子： http : //jsfiddle.net/n2dsc/1/
在webkit浏览器中，如果-webkit-appearance: none;则会出现外线-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来定位input的视图和重新定位的轨道/拇指的视野。
- 注1 – 不要尝试使用
translateX– 我认为FireFox使用它来实际滑动拇指 – 所以坚持translateY - 注2 – 确保使用键盘导航进行testing。 您只应尽可能以最小的量移动input，以避免虚线出现 。 如果你把它放在远处（
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); }
虚线轮廓不是问题，它是浏览器显示input元素被选中的方式。 你可以做的是将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/
如果任何自定义样式应用于input[type='range']则Firefox使用不同的模型（testing版）来渲染范围input。
你可以在这里看到2个不同的模型：
目前我不相信现在可以在Firefox中有一个自定义的CSS风格的input范围框来坚持outline: 0; 截至Firefox 27.0
为了使它完成：该错误已被修复，现在它正在与：
input[type=range]::-moz-focus-outer { border: 0; }
从所有input标签中删除所有轮廓使用：
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; } input[type='range']:focus { outline: 5px solid green; }
在这里你可以看到它：
我对mozilla的configuration部分也有一点研究
:-moz-any-link:focus { outline: none; } a, a:active, a:visited, a:hover { outline: 0; }
然后
:focus { outline: none; }
然后
::-moz-focus-inner { border: 0; }
解决scheme来了
:focus { outline:none; } ::-moz-focus-inner { border:0; }
