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

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

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

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

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

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