火狐浏览器在使用Tab键时忽略了选择元素的轮廓和焦点样式

Question

背景

Firefox 14（和13）在某些条件下会忽略特定的CSS样式。

问题

使用以下CSS：

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

JSFiddle

使用 Tab 键在 Firefox 14 (和 13) 中切换 select 元素时，这些样式会被忽略。在使用 Tab 后点击这些元素仍然会显示轮廓线。

注：

• 具体地说，对select进行样式设置而不是使用*没有效果。
• 这只出现在select元素中。

问题：

这是一个错误还是预期行为？

是否有其他 CSS 样式需要使用以防止轮廓线无限期地出现？

- Evan Mulawski

Answer 1

这是一个已知的问题，引发了多个Stackoverflow讨论。根据我所阅读的，Mozilla认为CSS不是处理此元素行为的正确位置，而选择通过其他方式处理。目前唯一的解决方案是使用tabindex="-1"或将元素设置为显示为其他内容，并重新设计下拉列表的外观和感觉 - 但要注意，这本身就会带来一些问题。

如果您选择这样做，我过去曾成功地使用以下方法：

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

Appearance指示浏览器将元素显示为其他内容，但这在不同厂商之间是不一致的。appearance: normal;是规范，而webkit会用none替换normal。-moz-appearance: radio-container;是我发现的唯一一种显示所选选项中文本并删除完全自定义下拉列表箭头的方法。然而，尝试使用可用选项进行实验，直到找到适合您的工作且不添加您希望自定义的焦点环。Internet Explorer需要更多的修补程序来满足您的需求。这是完全可能的，但超出了此问题和答案的范围。

- DigiKev

---

例如，该错误报告包含文本"我们故意不再支持HTML的该属性，因为它不是官方的CSS属性。" - 它仍然有文件记录，但仅供XUL使用... - Stobor

Answer 2

到目前为止，我发现克服这个问题的唯一方法是设置tabindex='-1'（参见 fiddle），这当然会完全将元素从tab选择链中移除。这对用户界面来说并不好，而且我猜想这也不是你想要的（我假设你想保留tab可访问性，只是自己进行高亮样式设计）。

- ScottS

---

没错，我有自己的聚焦元素样式，并且 Tab 键应该能够循环遍历它们。 - Evan Mulawski

@EvanMulawski--我确定的一件事是，“轮廓”实际上并不是一个“轮廓”。它与文本本身更密切相关。看看这个fiddle，其中padding和color作为文本的一部分影响它。请注意，您的问题以前已经被解决过了，可能已经有很多次了，但没有真正的解决方案。 - ScottS

@EvanMulawski--你可以尝试使用这个网站提供的“解决方法”：http://cssglobe.com/post/8802/custom-styling-of-the-select-elements。 - ScottS

Answer 3

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

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

- user3153963

Answer 4

使用

标签。

*:-moz-focusring {
  outline: 2px solid blue;
}

将为您提供类似于Chrome的体验

另外，如果使用Mac，您还需要启用此功能： 如何在Firefox中允许链接的键盘焦点？

- Fred Silva