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

如果你可以解决一个包装元素(很可能你已经有一个包装LIP ),你可以使用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); } 

http://jsfiddle.net/pF37g/98/

虚线轮廓不是问题,它是浏览器显示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个不同的模型:

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

目前我不相信现在可以在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; }

在这里你可以看到它:

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

我对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; }