style - webkit css firefox




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

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.

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)


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

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

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

Esto funciona en Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}


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.


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!


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


Parece que la única manera de lograr esto es estableciendo

browser.display.focus_ring_width = 0

en about: config en una base por navegador.


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


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


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

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


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

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




firefox