css - Firefox 在使用 Tab 时忽略选定元素的轮廓和焦点样式

Question

上下文

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

问题

使用以下 CSS:

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

JSFiddle

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

注意事项

• 专门设置 select 样式而不是 * 没有效果。
• 这只发生在 select 元素上。

问题

这是错误还是预期的行为？

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

Answer 1

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

如果您确实选择这样做，我过去曾在以下问题上取得过成功:

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

外观告诉浏览器将元素显示为其他东西，但这在供应商之间是不一致的。 appearance: normal; 是规范，而 webkit 将 normal 替换为 none。 -moz-appearance: radio-container; 是我发现在选定的选择选项中显示文本的唯一方法，同时删除箭头 chrome 以获得完全自定义的下拉列表。然而，try experimenting with the available options直到您找到有用的东西并且不会添加您想要自定义的聚焦环。 Internet Explorer 将需要进一步的组合才能使选择符合您的需要。完全有可能，但超出了这个问题和答案的范围。