Question

上下文

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

问题

使用以下CSS：

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

JSFiddle

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

备注

具体样式select代替*无效。
这仅适用于select元素。

问题

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

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

Answer 1

这是known bug，引发了多次Stackoverflow讨论。根据我的阅读，Mozilla认为CSS是处理这种元素行为的错误位置，而是选择通过其他方式处理它。此时唯一的解决方案是使用tabindex="-1"或将元素设置为显示为其他内容，并重新设置下拉列表的外观 - 但要注意，这会打开一堆蠕虫本身。 / p>

如果您选择这样做，我过去已经成功获得了以下kludge：

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

Appearance告诉浏览器将元素显示为其他内容，但这在供应商与供应商之间是不一致的。 appearance: normal;是规范，而webkit替换正常，没有。 -moz-appearance: radio-container;是我发现在所选择的选项中显示文本的唯一方法，同时删除完全自定义下拉列表的箭头铬。但是，try experimenting with the available options直到找到可行的内容并且不添加您想要自定义的焦点铃声。 Internet Explorer将需要更多的kludge来根据您的需要弯曲选择。完全可能，但超出了这个问题和答案的范围。

Answer 2

到目前为止，我发现克服它的唯一方法是设置tabindex='-1'（see fiddle），当然，它将元素完全取出标签选择链。这对于用户界面来说并不好，我的猜测并不完全符合您的要求（我假设您希望保留 tab 辅助功能，但只需使用自己的样式进行突出显示）。

Answer 3

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

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

Answer 4

使用

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

将使您与铬类似

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

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

4 个答案: