当使用Tab时，Firefox忽略选择元素的轮廓和对焦样式 [英] Firefox ignores outline and focus styles on select elements when using Tab

问题描述

上下文

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

Firefox 14 (and 13); specific CSS styles being ignored under certain conditions

问题

CSS：

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

JSFiddle

Firefox 14（和13）在使用 Tab 在 select 元素。在使用 Tab 之后点击这些元素仍会显示大纲。

Firefox 14 (and 13) ignore these styles when using Tab to switch between select elements. Clicking these elements after using Tab still displays the outline.

注意

• 特别是样式选择而不是 * 没有效果。 / li>

• 这仅适用于 select 元素。



• Specifically styling select instead of * has no effect.
• This only occurs with select elements.

问题

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

Is this a bug or intended behavior?

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

Are there any other CSS styles that need to be used to prevent the outline from appearing indefinitely?

推荐答案

这是一个已知错误，引发了几个Stackoverflow讨论。从我所读到的，Mozilla认为CSS是处理这个元素行为的错误的地方，并选择了通过其他方式处理它。这时，唯一的解决方案是使用 tabindex = - 1或者设置元素显示为别的东西，并重新设计droplist的外观和感觉 - 但是警告，这会打开一个可以蠕虫本身。

This is a known bug which has sparked several Stackoverflow discussions. From what I have read, Mozilla have deemed that CSS is the wrong place to handle this element behaviour, and have opted instead to handle it by other means. At this time the only solution is to either use tabindex="-1" or to set the element to display as something else, and restyle the look and feel of a droplist — but be warned, this opens a can of worms in itself.

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

If you do opt to do this, I have had success in the past with the following kludge:

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

外观告诉浏览器将元素显示为别的东西，但从供应商到供应商这是不一致的。 appearance：normal; 是规范，而webkit用none替换正常。 -moz-appearance：radio-container; 是我发现显示所选择的选项内的文本的唯一方法，同时删除箭头chrome为完全自定义droplist 。但是，请尝试使用可用的选项，直到找到有效的工作方式添加您想要自定义的对焦环。 Internet Explorer将需要进一步kludge来弯曲选择你的需要。完全可能，但超出了这个问题和答案的范围。

Appearance tells the browser to display the element as something else, but this is inconsistent from vendor to vendor. appearance: normal; is the spec, whilst webkit replaces normal with none. -moz-appearance: radio-container; has been the only way I have found to display the text within the chosen select option, whilst removing the arrow chrome for a fully customised droplist. However, try experimenting with the available options until you find something that works and doesn't add the focus ring you wish to customise. Internet Explorer will require further kludge to bend the select to your needs. Entirely possible, but out of scope for this question and answer.

这篇关于当使用Tab时，Firefox忽略选择元素的轮廓和对焦样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！