13

语境

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

问题

使用以下 CSS：

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

JSFiddle

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

笔记

  • 具体造型select而不是*没有效果。
  • 这只发生在select元素上。

问题

这是错误还是预期行为？

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

4

4 回答 4

8

这是一个已知的错误，引发了数次 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;一直是我发现在所选选择选项中显示文本的唯一方法，同时删除箭头镶边以获得完全自定义的下拉列表。但是，请尝试尝试可用的选项，直到找到可行的选项并且不添加您希望自定义的对焦环。Internet Explorer 将需要进一步的组合来根据您的需要进行选择。完全有可能，但超出了这个问题和答案的范围。

于 2012-07-08T19:40:54.663 回答
2

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

于 2012-07-06T18:53:41.030 回答
2

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

.my_elements:focus
{
    outline: none;
    box-shadow: 0 0 3px 0px red;
}
于 2014-01-07T14:39:55.967 回答
1

利用

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

会给你类似于 chrome

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

于 2019-11-08T17:49:06.843 回答