multiple - ¿Cómo puedo eliminar las líneas punteadas en un control desplegable SELECT/OPTION en Firefox?

select html php

Question

En Chrome y otros navegadores, mi menú desplegable se ve bien :

Sin embargo, en Firefox tiene líneas punteadas no deseadas:

He eliminado con éxito las líneas punteadas de Firefox no deseadas para botones y elementos de entrada con estas declaraciones CSS:

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

así que pensé que funcionarían para los elementos de selección / opción, pero no:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

¿Cómo puedo eliminar las líneas de puntos en este menú desplegable para que aparezca como en Chrome y otros navegadores?

Apéndice

Estos tampoco funcionan:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

ni estos:

select { outline: 0; }
option { outline: 0; }

ni estos:

select { outline: none; }
option { outline: none; }

Answer 1

Aquí está el truco combinado para eso:

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

Luego agregue la entrada con tabindex = 0 después de cada selección Y algún código para la "delegación" de foco:

$("select ~ input[type=button]").addEvent(''focus'', function(){
  this.getPrevious().focus();
});

Answer 2

La respuesta de James Broad es casi perfecta, pero el texto "solo de sombra" para los elementos de opciones se ve feo. Esto es lo que funciona perfectamente para mí:

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* your normal text color here */
}
select:-moz-focusring * {
  color:#000; /* your normal text color here */
  text-shadow:none;
}

Answer 3

intente usar outline: 0, funciona para botones

Answer 4

la solución que se encuentra en https://.com/a/18853002/728855 parece funcionar perfectamente.

En breve:

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Donde # 000 es tu color de texto.