Firefox ignores outline and focus styles on select elements when using Tab

Question

Context

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

The Problem

Using the following 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.

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?

Storiette

Answer 1

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.

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 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.

Communist

For example, that bug report contains the text "we purposely don't support that property for HTML anymore, because it's not an official CSS property." - it's still documented, but intended for XUL use only... – Fishhook

Answer 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).

Relay

Correct, I have my own styling for focused elements and Tab should be able to cycle through them. – Storiette

@EvanMulawski--One thing I know for sure, the "outline" is not really an outline. It is tied more intimately to the text itself. Look at this fiddle, where the padding and color affect it as part of the text. Note that your problem has been addressed before, probably many times, yet without a real solution. – Relay

@EvanMulawski--This site may offer a "workaround" you can use. – Relay

Answer 3

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

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

Breast

Answer 4

Use

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

will give you similiar to chrome

Also, if using mac, you also need to enable this: How to allow keyboard focus of links in Firefox?

Declinate