Eliminar el contorno del cuadro de selección en FF

¿Es posible eliminar la línea de puntos que rodea un elemento seleccionado en un elemento seleccionado?

Intenté agregar la outlinepropiedad en CSS pero no funcionó, al menos no en FF.

<style>
   select { outline:none; }
</style>

Actualización
Antes de continuar y eliminar el esquema, lea esto.
http://www.outlinenone.com/

Encontré una solución, pero es la madre de todos los trucos, con suerte servirá como punto de partida para otras soluciones más sólidas. La desventaja (demasiado grande en mi opinión) es que cualquier navegador que no admita text-shadowpero admita rgba(IE 9) no procesará el texto a menos que use una biblioteca como Modernizr (no probada, solo una teoría).

Firefox usa el color del texto para determinar el color del borde punteado. Así que di que si lo haces ...

select {
  color: rgba(0,0,0,0);
}

Firefox hará que el borde punteado sea transparente. ¡Pero, por supuesto, su texto también será transparente! Entonces, de alguna manera debemos mostrar el texto. text-shadowviene al rescate:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Ponemos una sombra de texto sin desplazamiento y sin desenfoque, para que reemplace el texto. Por supuesto, los navegadores más antiguos no entienden nada de esto, por lo que debemos proporcionar una alternativa para el color:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Aquí es cuando entra en juego IE9: admite rgbapero no text-shadow, por lo que obtendrá un cuadro de selección aparentemente vacío. Obtén tu versión de Modernizr con text-shadowdetección y haz ...

.no-textshadow select {
  color: #000;
}

Disfrutar.

Bueno, la respuesta de Duopixel es simplemente perfecta. Si damos un paso más, podemos hacerlo a prueba de balas.

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

Ahí lo tienes, solo es válido para Firefox y el feo contorno de puntos alrededor de la opción seleccionada ha desaparecido.

Aquí hay una colaboración de soluciones para solucionar problemas de estilo con los cuadros de selección de Firefox. Utilice este selector de CSS como parte de su restablecimiento de CSS habitual.

La clase elimina el esquema según la pregunta, pero también elimina cualquier imagen de fondo (ya que normalmente uso una flecha desplegable personalizada y la flecha desplegable del sistema Firefoxes no se puede eliminar actualmente). Si usa la imagen de fondo para cualquier otra cosa que no sea la imagen desplegable, simplemente elimine la líneabackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Esto apuntará a todas las versiones de Firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Es posible que desee eliminar el! Important, si planea que el esquema aparezca en otras páginas de su sitio que usan la misma hoja de estilo.

En general, los controles de formulario son imposibles de diseñar con ese grado de precisión. No hay ningún navegador que yo sepa que admita un rango sensible de propiedades en todos los controles. Esa es la razón por la que hay un trillón de bibliotecas de JavaScript que "falsifican" los controles de formulario con imágenes y otros elementos HTML y emulan su funcionalidad original con código:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

Si usa esto, el borde permanece hasta que seleccione un elemento de la lista.

Prueba uno de estos:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Referencia

Aquí viene la solución

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Elimina el contorno / borde punteado de todas las etiquetas seleccionables de Firefox.

Pon esta línea de código en tu hoja de estilo:

*:focus{outline:none !important;}   

Agregue estilo de borde: ninguno a su selección en CSS.

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

trabajando 100%

Esto eliminará el foco del selectelemento y el contorno :

$("select").click(function(){
    $(this).blur();
});

Aunque esto no está exento de deficiencias en otros navegadores. Querrá verificar el navegador que está usando el usuario:

if (FIREFOX) {
    //implement the code
}