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

Context

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

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

The Problem

Using the following CSS:

使用以下CSS:

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

JSFiddle

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.

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

Notes

Specifically styling select instead of * has no effect.

特别是样式选择而不是*没有效果。

This only occurs with select elements.

这仅适用于选择元素。

The Question

Is this a bug or intended behavior?

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

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

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

3 个解决方案

#1

This is a known bug which has sparked several * 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.

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

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

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

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

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.

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

#2

So far the only way I've found to overcome it is to set the tabindex='-1' (see fiddle) which, of course, takes the element completely out of the tab selection chain. That would not be good for user interface, and my guess is not exactly what you desire (I assume you want to keep tab accessibility but just do your own styling for highlighting).

到目前为止,我发现克服它的唯一方法是设置tabindex =' - 1'(参见小提琴),当然,它将元素完全取出选项卡选择链。这对于用户界面来说并不好,我的猜测并不完全符合您的要求(我假设您希望保持标签可访问性,但只需要使用自己的样式进行突出显示)。

#3

Another solution is to set outline: none and set a box-shadow. For example:

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

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

#1