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




only solo (21)

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

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)


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

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



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.


[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


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


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} 

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


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

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

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

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

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

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!


:focus, :active {
    outline: 0;
    border: 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;
}

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

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


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!


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


Demo aquí
Prueba este

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});




css firefox