it-swarm-es.tech

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

Puedo hacer que Firefox no muestre los feos puntos de enfoque en campo de golf con este:

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 los puntos grises feos)

451
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
678
user27656

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 los teclados.

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

275

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

Lo siguiente me funcionó 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!

41
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

[Actualización] Esta solución ya no funciona. La solución que me funcionó es esta https://stackoverflow.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

9
Renato Carvalho

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

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!

5
Shannon Hochkins

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 en 0. Entonces, Firefox no mostrará ningún borde punteado.

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

5
Vitaly Sharovatov

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

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

Antes de (los puntos blancos son visibles)

 input with white dots

Después de (los puntos blancos son invisibles)  enter image description here

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 !!

4
Madan Sapkota

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

3
Abhay Singh

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

Entonces, no te olvides de 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;
}
3
herci

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} 
2
John

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

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

Parece que la única manera de lograr esto es estableciendo

browser.display.focus_ring_width = 0

en aproximadamente: config en una base por navegador.

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

Donde button puede ser el selector de CSS para el que desea deshabilitar el comportamiento.

2
wavded

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 estado :focus al botón que reemplaza esto 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 tomar ese molesto esquema, pero siempre preparo un enfoque visual alternativo de enfoque.

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

2
Flatline

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

Eliminar el contorno de puntos de los 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;
}
2
Fizer Khan

Esto obtendrá el control de rango:

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

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

2
bob

Sí no te pierdas! Importante

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

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;}
0
Waqas Bukhary

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

0
usual

Esto funciona en Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

Junto con Bootstrap 3 utilicé este código. El segundo conjunto de reglas solo deshacer 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 que su archivo css personalizado debe aparecer después del archivo css de Bootstrap en su código html para anularlo.

0
Ehsan88