¿Cómo eliminar el contorno punteado de Firefox en BOTONES y en enlaces?

Puedo hacer que Firefox no muestre los contornos feos de puntos en los enlaces con esto:

a:focus { 
    outline: none; 
}

Pero, ¿cómo puedo hacer esto también para las <button>etiquetas? Cuando hago esto:

button:focus { 
    outline: none; 
}

los botones aún tienen el contorno de puntos punteados cuando hago clic en ellos.

(y sí, sé que este es un problema de usabilidad, pero me gustaría proporcionar mis propias sugerencias de enfoque que sean apropiadas para el diseño en lugar de puntos grises feos)

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

No es necesario definir un selector.

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

Sin embargo, esto viola las mejores prácticas de accesibilidad del W3C. El esquema está ahí para ayudar a aquellos que navegan con teclados.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Si prefiere usar CSS para deshacerse del contorno punteado:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Lo siguiente funcionó para mí en el caso de ENLACES, pensé en compartir, en caso de que alguien esté interesado.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

¡Salud!

:focus, :active {
    outline: 0;
    border: 0;
}

[Actualización] Esta solución ya no funciona. La solución que funcionó para mí es esta https://stackoverflow.com/a/3844452/925560

La respuesta marcada como correcta no funcionó con Firefox 24.0.

Para eliminar el contorno punteado de Firefox en botones y etiquetas de anclaje, agregué el siguiente código:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Encontré la solución aquí: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Intenté la mayoría de las respuestas aquí, pero ninguna de ellas funcionó para mí. Cuando me di cuenta de que también tenía que deshacerme del contorno azul de los botones de Chrome, encontré otra solución. Eliminar el borde azul del botón de estilo personalizado css en Chrome

Este código funcionó para mí en Firefox versión 30 en Windows 7. Quizás podría ayudar a alguien más :)

button:focus {outline:0 !important;}

No hay forma de eliminar estos focos punteados en Firefox usando CSS.

Si tiene acceso a las computadoras donde funciona su aplicación web, vaya a about: config en Firefox y configúrelo browser.display.focus_ring_widthen 0. Entonces Firefox no mostrará ningún borde punteado.

El siguiente error explica el tema: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Hay muchas soluciones encontradas en la web para esto, muchas de las cuales funcionan, pero para forzar esto, de modo que absolutamente nada pueda resaltar / enfocarse una vez que use lo siguiente:

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

¡Esto solo agrega un poco más de seguridad adicional y sella el trato!

Esto obtendrá el control de rango:

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

De: elimine el contorno punteado del elemento de entrada de rango en Firefox

Probado en Firefox 46 y Chrome 49 con este código.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Antes (los puntos blancos son visibles)

Después (los puntos blancos son invisibles)

Si desea aplicar solo en unos pocos campos de entrada, botones, etc. Utilice el código más específico.

input[type=text] {
  outline: none !important;
}

Feliz codificación !!

Simplemente agregue este CSS para el cuadro de selección

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

Esto está funcionando bien para mí.

Creo que realmente debería saber lo que está haciendo eliminando el contorno del foco, ya que puede estropearlo para la navegación y la accesibilidad del teclado.

Si necesita eliminarlo debido a un problema de diseño, agregue un :focusestado al botón que lo reemplace con alguna otra señal visual, como cambiar el borde a un color más brillante o algo así.

A veces siento la necesidad de sacar ese esquema molesto, pero siempre preparo una señal visual de enfoque alternativo.

Y nunca use la blur()función js. Usa la ::-moz-focus-innerpseudo clase.

En la mayoría de los casos, sin agregar el !importantcódigo CSS, no funcionará.

Entonces, no olvides agregar !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

O cualquier otro código:

button::-moz-focus-inner {
  border: 0 !important;
}

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

¿Dónde buttonpuede estar el selector CSS para el que desea deshabilitar el comportamiento?

Es posible que desee intensificar el enfoque en lugar de deshacerse de él.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Elimine el contorno punteado de enlaces, botones y elementos de entrada.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Si tiene un borde en un botón y desea ocultar el contorno punteado en Firefox sin quitar el borde (y, por lo tanto, es un ancho adicional en el botón), puede usar:

.button::-moz-focus-inner {
    border-color: transparent;
}

El siguiente código CSS funciona para eliminar esto:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Parece que la única forma de lograr esto es estableciendo

browser.display.focus_ring_width = 0

en about: config por navegador.

Esto funciona en firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Después de probar muchas opciones de lo anterior, solo lo siguiente funcionó para mí.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Junto con Bootstrap 3 utilicé este código. El segundo conjunto de reglas simplemente deshace lo que hace bootstrap para los botones de enfoque / activo:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

NOTA: su archivo css personalizado debe aparecer después del archivo css Bootstrap en su código html para anularlo.

Sí, no te pierdas ! Importante

button::-moz-focus-inner {
 border: 0 !important;
}

Puedes probar button::-moz-focus-inner {border: 0px solid transparent;}en tu CSS.