¿Cómo eliminar el contorno de puntos de Firefox en los BOTONES y en los enlaces?
Puedo hacer que Firefox no muestre los feos contornos de puntos en los enlaces con esto:
a:focus {
outline: none;
}
Pero, ¿cómo puedo hacer esto <button>también con las etiquetas? Cuando hago esto:
button:focus {
outline: none;
}
los botones todavía tienen el contorno de enfoque punteado cuando hago clic en ellos.
(y sí, sé que esto es un problema de usabilidad, pero me gustaría brindar mis propias sugerencias de enfoque que sean apropiadas para el diseño en lugar de feos puntos grises)
button::-moz-focus-inner {
border: 0;
}
Oct 13 '2008 22:10
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 quienes navegan con teclados.
https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples
Si prefiere utilizar CSS para deshacerse del contorno de puntos:
/*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;
}
Lo siguiente funcionó para mí en el caso de ENLACES, pensé en compartirlo, en caso de que alguien esté interesado.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
¡Salud!
:focus, :active {
outline: 0;
border: 0;
}
