问题 使用Tab时,Firefox会忽略选定元素的轮廓和焦点样式


上下文

Firefox 14(和13);在某些条件下忽略特定的CSS样式

问题

使用以下CSS:

*
{
    outline:none;
    -moz-outline:none;
    -moz-user-focus:ignore;    
}

的jsfiddle

Firefox 14(和13)在使用时忽略这些样式 标签 之间切换 select 元素。使用后单击这些元素 标签 仍显示轮廓。

笔记

  • 具体造型 select 代替 * 没有效果。
  • 这只发生在 select 元素。

问题

这是一个错误还是预期的行为?

是否还需要使用其他CSS样式来防止轮廓无限期出现?


11891
2017-07-04 17:36


起源



答案:


这是一个 已知的bug 这引发了几次Stackoverflow讨论。根据我的阅读,Mozilla认为CSS是处理这种元素行为的错误位置,而是选择通过其他方式处理它。此时唯一的解决方案是使用 tabindex="-1" 或者将元素设置为显示为其他内容,并重新设置下拉列表的外观 - 但要注意,这会打开一堆蠕虫本身。

如果您选择这样做,我过去已经成功获得以下kludge:

select {
    appearance: normal;
        -webkit-appearance: none;
        -moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}

外观告诉浏览器将元素显示为其他内容,但这在供应商与供应商之间是不一致的。 appearance: normal; 是规范,而webkit替换正常,没有。 -moz-appearance: radio-container; 是我发现在所选择的选项中显示文本的唯一方法,同时删除完全自定义下拉列表的箭头铬。然而, 尝试尝试可用的选项 直到找到有效的东西,并且不添加您想要自定义的聚焦环。 Internet Explorer将需要更多的kludge来根据您的需要弯曲选择。完全可能,但超出了这个问题和答案的范围。


8
2017-07-08 19:40



例如,该错误报告包含文本 “我们故意不再支持HTML的属性了,因为它不是官方的CSS属性。”  - 它仍然有文件证明,但仅供XUL使用...... - Stobor
在FF26中不起作用 - Simon


答案:


这是一个 已知的bug 这引发了几次Stackoverflow讨论。根据我的阅读,Mozilla认为CSS是处理这种元素行为的错误位置,而是选择通过其他方式处理它。此时唯一的解决方案是使用 tabindex="-1" 或者将元素设置为显示为其他内容,并重新设置下拉列表的外观 - 但要注意,这会打开一堆蠕虫本身。

如果您选择这样做,我过去已经成功获得以下kludge:

select {
    appearance: normal;
        -webkit-appearance: none;
        -moz-appearance: radio-container; /* renders text within select, without arrow chrome */
}

外观告诉浏览器将元素显示为其他内容,但这在供应商与供应商之间是不一致的。 appearance: normal; 是规范,而webkit替换正常,没有。 -moz-appearance: radio-container; 是我发现在所选择的选项中显示文本的唯一方法,同时删除完全自定义下拉列表的箭头铬。然而, 尝试尝试可用的选项 直到找到有效的东西,并且不添加您想要自定义的聚焦环。 Internet Explorer将需要更多的kludge来根据您的需要弯曲选择。完全可能,但超出了这个问题和答案的范围。


8
2017-07-08 19:40



例如,该错误报告包含文本 “我们故意不再支持HTML的属性了,因为它不是官方的CSS属性。”  - 它仍然有文件证明,但仅供XUL使用...... - Stobor
在FF26中不起作用 - Simon


到目前为止,我发现克服它的唯一方法是设置 tabindex='-1' (看小提琴当然,这完全取出了元素 标签 选择链。这对用户界面来说并不好,我的猜测并不完全是你想要的(我假设你想保留 标签 可访问性,但只是做自己的样式突出显示)。


2
2017-07-06 18:53



正确,我有自己的焦点元素样式,Tab应该能够循环它们。 - Evan Mulawski
@EvanMulawski - 我肯定知道的一件事,“大纲”并不是真的 outline。它与文本本身更紧密地联系在一起。看着 这个小提琴,哪里 padding 和 color 影响它作为文本的一部分。请注意,您的问题已经存在 以前解决了,可能 多次但没有真正的解决方案。 - ScottS
@ EvanMulawski--这个网站 可以提供您可以使用的“解决方法”。 - ScottS


另一个解决方案是设置outline:none并设置box-shadow。例如:

.my_elements:focus
{
    outline: none;
    box-shadow: 0 0 3px 0px red;
}

2
2018-01-07 14:39