Firefox ignora esquema y se centran en los elementos de estilos selecciona cuando se utiliza Tab

Question

Contexto

Firefox 14 (y 13); estilos CSS específicos siendo ignorados bajo ciertas condiciones

El problema

Usando el siguiente CSS:

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

JSFiddle

Firefox 14 (y 13) ignorar estos estilos cuando se utiliza Tab para cambiar entre select elementos. Al hacer clic en estos elementos después de usar , la pestaña sigue mostrando el contorno.

Notas

• Específicamente labrar select en lugar de * no tiene ningún efecto.
• Esto solo ocurre con los elementos select.

La pregunta

Es esto un error o comportamiento previsto?

¿Hay algún otro estilo CSS que deba usarse para evitar que el esquema aparezca indefinidamente?

Answer 1

Este es un known bug que ha provocado varias discusiones de Stackoverflow. Por lo que he leído, Mozilla consideró que CSS es el lugar equivocado para manejar el comportamiento de este elemento, y optó por manejarlo de otra manera. En este momento, la única solución es usar tabindex="-1" o configurar el elemento para que se muestre como algo más, y cambiar la apariencia de una lista desplegable, pero tenga en cuenta que esto abre una lata de gusanos.

Si usted opta por hacer esto, he tenido éxito en el pasado con la siguiente kludge:

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

Apariencia le dice al navegador para mostrar el elemento como algo más, pero esto es incompatible de proveedor a vendedor. appearance: normal; es la especificación, mientras que webkit reemplaza lo normal con ninguno. -moz-appearance: radio-container; ha sido la única forma en que he encontrado para mostrar el texto dentro de la opción de selección elegida, mientras quitaba la flecha cromada para una lista desplegable totalmente personalizada. Sin embargo, try experimenting with the available options hasta que encuentre algo que funciona y no agrega el anillo de enfoque que desea personalizar. Internet Explorer requerirá más kludge para doblar la selección a sus necesidades. Completamente posible, pero fuera del alcance de esta pregunta y respuesta.

Answer 2

Hasta ahora, la única manera que he encontrado para superarlo es fijar la tabindex='-1' (see fiddle) que, por supuesto, lleva el elemento completamente fuera de la pestaña cadena selección. Eso no sería bueno para la interfaz de usuario, y supongo que no es exactamente lo que deseas (supongo que quieres mantener la pestaña de accesibilidad, pero solo tienes que hacer tu propio estilo para resaltar).

Answer 3

Otra solución es establecer el esquema: ninguno y establecer un cuadro sombreado. Por ejemplo:

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