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

507

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)

Edward Tanguay
fuente
2
Parece que en Firefox 4, los elementos ya no obtienen un esquema por defecto cuando se hace clic, sino solo cuando se recibe el foco del teclado.
Geert
1
Lo que usted llama "feo" está destinado a admitir la accesibilidad de un sitio web. Los usuarios que usan solo el teclado ya no pueden determinar qué parte del sitio web está enfocada al eliminar este esquema. Su sitio web sería completamente inaccesible y este nunca debería ser el caso. Nunca quite el contorno. Mejor estilo a tu manera.
Markus Graf

Respuestas:

787
button::-moz-focus-inner {
  border: 0;
}
Josh Crozier
fuente
15
¡Sí, a mí también me funciona! Ahora, ¿cómo se puede hacer para selectos?
7wp
16
Tenga en cuenta que esto también funciona para la entrada (por ejemplo, input :: - moz-focus-inner {border: 0;})
El Yobo
15
Propósito del doble colon: (notación CSS3) evotech.net/blog/2007/05/…
sholsinger
21
Este no funcionó para mí, porque bootstrap.css estaba haciendo estos botones de puntos feos. En cambio, he puesto:focus {outline:none !important;}
machineaddict
55
: focus {outline: none;} :: - moz-focus-inner {border: 0;} sería menos específico
Ben
311

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

Anderson Custódio
fuente
8
Gracias, esto funcionó para mí cuando la respuesta correcta no lo hizo. Debo haber estado usando el selector equivocado.
irl_irl
Gracias por esto, ¿esto también lo eliminará en enlaces y botones?
Nathan
3
Este es el mejor! La respuesta aceptada es solo para <button>, no <a>ni<input>
Ron van der Heijden
2
Perfecto en Mozilla Firefox 30 bajo Ubuntu (GNU / Linux).
e-info128
44
Secundaré la nota sobre esta accesibilidad de última hora. Es importante recordar que no todos pueden usar un mouse, o ver o ver bien. Dicho esto, según el enlace (y el sentido común) que oculta el esquema solo se rompe a11y cuando está hecho without ... an author-supplied visual focus indicator; en otras palabras, está bien reemplazar el estilo de agente de usuario con el suyo, como mencionó OP. Idealmente debería ser de alto contraste.
johncip
48

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; 
    }
chinkchink
fuente
No necesita una unidad en números que son cero. 0pxpuede ser reemplazado por solo0
argot
44

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!

foxybagga
fuente
12
Simplemente a { outline: none; }debería ser suficiente para los enlaces.
conceder
3
aquí el! importante hizo el truco, las otras soluciones no tenían eso y no funcionaron. para mi.
Cristiano Fontes
Pero a menudo debe usar a { outline: none; }con !important->a { outline: none !important; }
joryl
24
:focus, :active {
    outline: 0;
    border: 0;
}
blizzyx
fuente
Funcionó de maravilla para un cuadro de opción seleccionado que estaba usando
Muhammad Ahsan
1
Esto no era lo suficientemente específico, y no quería usar elementos importantes o solo objetivos a, así que encontré una buena opción para ser body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Ivan Durst el
10

[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

Renato Carvalho
fuente
2
Ya no funciona: / La solución que funcionó es esta stackoverflow.com/a/3844452/925560
Renato Carvalho
8

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;}
Vartox
fuente
Lo mismo aquí, esta es la única solución que funciona en FF 38.0.5
OlivierH
6

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

Vitaly Sharovatov
fuente
Gracias, funciona bien, pero he creado tantos enlaces anteriormente que nunca he tenido este problema hasta ahora. pero ahora estoy confundido, ¿cuál es la razón anterior al presente?
Durga Rao
Esta es la respuesta ahora es completamente falsa. Establecer lo ::-moz-focus-inner {border:0;}mencionado en varias otras respuestas funciona perfectamente.
Andy Mercer
@AndyM Esta respuesta funciona. La solución presentada en otras respuestas es para CSS y solo funciona para sitios individuales.
Rahil Wazir
77
La pregunta pregunta cómo se puede hacer con CSS, y la respuesta dice que no se puede hacer. Eso es falso. Puede ser.
Andy Mercer
6

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!

Shannon Hochkins
fuente
5

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)

entrada con puntos blancos

Después (los puntos blancos son invisibles) ingrese la descripción de la imagen aquí

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

Madan Sapkota
fuente
La !importantnecesitaba para anular la hoja de estilo de Firefox. ¡Salud!
SamHH
5

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

Abhay Singh
fuente
4

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.

Línea plana
fuente
4

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;
}
herci
fuente
3
button::-moz-focus-inner { border: 0; }

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

ondulado
fuente
3

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} 
Jason Plank
fuente
2
@Nathan un poco tarde, pero no tener ningún estilo en el estado de enfoque afectará la experiencia del teclado. no podrá saber qué está enfocado cuando presione la tecla tab .
Hkan
@Hkan Sí, estoy de acuerdo. Pero el contorno de Firefox es feo, especialmente cuando se trata de un borde de enfoque personalizado.
Nathan
@Nathan, estoy completamente de acuerdo con eso. Lo que debemos hacer es proporcionar nuestro propio estilo para el estado de enfoque en lugar de hacer que los elementos sean los mismos en dicho estado.
Hkan
3

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;
}
Fizer Khan
fuente
3

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

Parece que la única forma de lograr esto es estableciendo

browser.display.focus_ring_width = 0

en about: config por navegador.

AlexWilson
fuente
1

Esto funciona en firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
star18bit
fuente
1

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;}
Waqas Bukhary
fuente
En realidad (al menos en Firefox 77), solo necesitas: ¡ button:focus { outline: none !important } o si te gusto no me gusta! Importante, esto también funciona para anular el estilo de Firefox: :root button:focus { outline: none }
Jonas Sandstedt
1

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.

Ehsan88
fuente
1

Sí, no te pierdas ! Importante

button::-moz-focus-inner {
 border: 0 !important;
}
Riwaj Chalise
fuente
! importante no es parte de la respuesta aquí, y si su aplicación lo necesita, entonces tiene mayores problemas que resolver que los resaltados alrededor de sus botones. ¡Esfuércese siempre por evitar! Importante.
monokrome
0

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

usual
fuente