solo - style css firefox

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

Question

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

Los botones aún tienen el contorno de enfoque de puntos cuando hago clic en ellos.

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

Answer 1

Creo que realmente debería saber lo que está haciendo eliminando el esquema de enfoque, 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 :focus estado de :focus al botón que reemplaza esto con alguna otra indicación visual, como cambiar el borde a un color más brillante o algo así.

A veces siento la necesidad de tomar ese molesto esquema, pero siempre preparo un enfoque visual alternativo de enfoque.

Y nunca use la función blur() js. Utilice la ::-moz-focus-inner pseudo class.

Answer 2

Después de probar muchas de las opciones anteriores, solo me funcionó lo siguiente.

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

Answer 3

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;
}

Answer 4

Eliminar contorno de puntos 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;
}

Answer 5

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

Así que, no olvides añadir !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;
}

Answer 6

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} 

Answer 7

Esto funciona en Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 8

Esto obtendrá el control de rango:

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

Desde: Eliminar el contorno punteado del elemento de entrada de rango en Firefox

Answer 9

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

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

¡Esto solo agrega un poco de seguridad extra y sella el trato!

Answer 10

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;
}

TENGA EN CUENTA que su archivo css personalizado debe aparecer después del archivo css de Bootstrap en su código html para anularlo.

Answer 11

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

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

¡Aclamaciones!

Answer 12

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 los que navegan con los teclados.

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

Answer 13

No hay forma de eliminar estos puntos de enfoque en Firefox usando CSS.

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

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

Answer 14

Parece que la única manera de lograr esto es estableciendo

browser.display.focus_ring_width = 0

en about: config en una base por navegador.

Answer 15

Probé 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 en los botones de Chrome, encontré otra solución. Eliminar borde azul del botón de estilo personalizado css en Chrome

Este código me funcionó en la versión 30 de Firefox en Windows 7. Tal vez podría ayudar a alguien más allá afuera :)

button:focus {outline:0 !important;}

Answer 16

Probado en Firefox 46 y Chrome 49 usando 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 algunos campos de entrada, botones, etc. Use el código más específico.

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

Feliz codificacion !!

Answer 17

Puede probar el button::-moz-focus-inner {border: 0px solid transparent;} en su CSS.

Answer 18

Si prefieres usar CSS para deshacerte del contorno de puntos:

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

Answer 19

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

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

Answer 20

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

Answer 21

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

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

Para eliminar el contorno de puntos de Firefox en los botones y las 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

Answer 22

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

Answer 23

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

Answer 24

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

El button donde puede estar el selector de CSS para el que desea deshabilitar el comportamiento.