Css 使用Tab时，Firefox会忽略选定元素上的大纲和焦点样式

上下文

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

问题

使用以下CSS：

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

Firefox14和13在使用Tab在选择元素之间切换时忽略这些样式。使用选项卡后单击这些元素仍会显示轮廓

注释

特别地，将“选择”样式设置为“而不是*”没有效果。 这仅在选择元素时发生。 问题

这是一个bug还是预期的行为

---

是否需要使用其他CSS样式来防止大纲无限期地出现？

到目前为止，我发现克服它的唯一方法是设置tabindex='-1'，当然，这会使元素完全脱离选项卡选择链。这对用户界面不好，我猜这并不是你想要的，我假设你想保持标签的可访问性，但只是做你自己的样式突出显示

这是一个引发了多次讨论的问题。从我所读到的内容来看，Mozilla认为CSS是处理此元素行为的错误位置，并选择通过其他方式来处理它。此时唯一的解决方案是使用tabindex=-1或将元素设置为显示为其他内容，并重新设置水滴列表的外观样式-但请注意，这本身就打开了一个蠕虫罐

如果你真的选择这样做，我过去在以下方面取得了成功：

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

---

外观指示浏览器将元素显示为其他内容，但不同供应商的外观不一致。外观：正常；是规范，而webkit则将普通替换为无-moz外观：无线电容器；这是我发现的唯一一种在所选选择选项中显示文本的方法，同时删除完全定制的雾滴列表的箭头铬。然而，直到你找到一个可以工作的东西，并且没有添加你想要定制的聚焦环。Internet Explorer将需要进一步的调整，以使选择适应您的需要。完全可能，但超出了此问题和答案的范围。

另一种解决方案是设置大纲：无并设置框阴影。例如：

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

使用

将给你类似的铬

此外，如果使用mac，还需要启用以下功能：

---

正确，我有自己的聚焦元素样式，Tab应该能够循环使用。@EvanMulawski有一件事我可以肯定，大纲并不是一个真正的大纲。它与文本本身有着更密切的联系。看看，填充和颜色作为文本的一部分影响它的位置。请注意，您的问题可能一直没有真正的解决方案。@EvanMulawski-可能提供了一个您可以使用的解决方法。例如，该错误报告包含文本-它仍然有文档记录，但仅用于XUL。。。

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