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

Posted 2023-03-06

【中文标题】Firefox 在使用 Tab 时会忽略选定元素上的轮廓和焦点样式

【英文标题】：Firefox ignores outline and focus styles on select elements when using Tab

【发布时间】：2012-07-05 05:07:30

【问题描述】：

上下文

Firefox 14（和 13）；在某些情况下会忽略特定的 CSS 样式

问题

使用以下 CSS：

*

    outline:none;
    -moz-outline:none;
    -moz-user-focus:ignore;    

JSFiddle

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

备注

专门设置 select 而不是 * 的样式无效。 这只发生在 select 元素上。

问题

这是错误还是预期行为？

是否需要使用其他 CSS 样式来防止轮廓无限显示？

【参考方案1】：

使用

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

会给你类似于chrome的

另外，如果使用 mac，您还需要启用此功能： How to allow keyboard focus of links in Firefox?

【参考方案2】：

这是known bug，它引发了数次 *** 讨论。根据我的阅读，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; 是我发现在所选选择选项中显示文本的唯一方法，同时删除箭头镶边以获得完全自定义的下拉列表。但是，try experimenting with the available options 直到您找到可行的方法并且没有添加您希望自定义的对焦环。 Internet Explorer 将需要进一步的组合来根据您的需要进行选择。完全有可能，但超出了这个问题和答案的范围。

【讨论】：

例如，该错误报告包含文本 "we purposely don't support that property for html anymore, because it's not an official CSS property." - 它仍被记录在案，但仅供 XUL 使用...

【参考方案3】：

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

.my_elements:focus

    outline: none;
    box-shadow: 0 0 3px 0px red;

【参考方案4】：

到目前为止，我发现克服它的唯一方法是设置tabindex='-1' (see fiddle)，当然，这会将元素完全从 tab 选择链中取出。这对用户界面不利，而且我的猜测并不是您想要的（我假设您想保持 tab 可访问性，但只是为突出显示做自己的样式）。

【讨论】：

正确，我有自己的焦点元素样式，Tab 应该能够循环浏览它们。

@EvanMulawski--我肯定知道，“大纲”并不是真正的outline。它与文本本身更紧密地联系在一起。查看this fiddle，其中padding 和color 作为文本的一部分影响它。请注意，您的问题一直是addressed before，可能是many times，但还没有真正的解决方案。

@EvanMulawski--This site 可能会提供您可以使用的“解决方法”。