Eliminar el borde azul del botón css de estilo personalizado en Chrome

Estoy trabajando en una página web y quiero tags

¡Espere! ¡Hay una razón para ese contorno feo!

Antes de eliminar ese contorno azul feo, es posible que desee tener en cuenta la accesibilidad . Por defecto, ese contorno azul se coloca en elementos enfocables. Esto es para que los usuarios con problemas de accesibilidad puedan enfocar ese botón tabulándolo. Algunos usuarios no tienen las habilidades motoras para usar un mouse y deben usar solo el teclado (o algún otro dispositivo de entrada) para la interacción de la computadora. Cuando elimina el contorno azul, ya no hay un indicador visual de qué elemento está enfocado. Si va a eliminar el contorno azul, debe reemplazarlo con otro tipo de indicación visual de que el botón está enfocado.

Possible Solution: Darken Buttons when focused

Para los ejemplos a continuación, el contorno azul de Chrome se eliminó primero con el button:focus { outline:0 !important; } button:focus { outline:0 !important; }

Aquí están los botones básicos de Bootstrap como aparecen normalmente: Botones Bootstrap en estado normal

Aquí están los botones cuando reciben foco: Botones Bootstrap en estado enfocado

Aquí los botones cuando se presionan: enter image description here

Como puede ver, los botones son un poco más oscuros cuando reciben el foco. Personalmente, recomendaría hacer los botones enfocados aún más oscuros para que haya una diferencia muy notable entre el estado enfocado y el estado normal del botón.

No es solo para usuarios con discapacidades

Hacer que su sitio sea más accesible es algo que a menudo se pasa por alto, pero puede ayudar a crear una experiencia más productiva en su sitio web. Hay muchos usuarios normales que usan comandos de teclado para navegar a través de sitios web con el fin de mantener las manos sobre el teclado.

Solo elimino el esquema de todas las tags en la página seleccionando todo y aplicando el contorno: none a todo 🙂

 *:focus {outline:none} 

Como se mencionó en el bagofcole, es posible que también deba agregar! Importante, por lo que el estilo se verá así:

 *:focus {outline:none !important} 

No olvides la statement !important para un mejor resultado

 button:focus {outline:0 !important;} 

Una regla que tenga la propiedad! Importante siempre se aplicará independientemente de dónde aparezca esa regla en el documento CSS.

En mi instancia de este problema, tuve que especificar box-shadow: none

 button:focus { text-decoration: none; outline:none; border: none; box-shadow: none; } 

Agregue esto en su archivo CSS.

 *{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; } 

Usa esto:

 :active { outline:none; } 

o esto si eso no funciona:

 :active { outline:none !important; } 

Esto funciona para mí (FF y Chrome, al menos). En lugar de apuntar al estado de :focus solo apunte al :active estado :active y eso eliminará el resaltado estéticamente molesto en su navegador cuando un usuario hace clic en un enlace. Pero aún conservará los estados de enfoque cuando un usuario con tabs de discapacidades o tabs de desplazamiento atraviesa una página. Ambas partes están felices. 🙂

Para cualquiera que use Bootstrap y tenga este problema, usan: active: focus y simplemente: active y: focus, por lo que necesitará:

 element:active:focus { outline: 0; } 

Con un poco de suerte le ahorré a alguien un tiempo pensando en eso, me golpeé la cabeza preguntándome por qué algo tan simple no funcionaba.

Esto es lo que funcionó para mí:

 button:focus { box-shadow:none; } 

prueba este código para todos los elementos que tengan un problema de borde azul

 *{ outline: none; } 

o

 *{ outline-style: none; } 

Si desea eliminar el mismo efecto en la entrada, puede agregar el siguiente código y el botón.

 input:focus {outline:0;} 

para este problema:

enter image description here

utilizar esta:

  *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ } 

resultado:

enter image description here

Hasta que todos los navegadores modernos comiencen a admitir css-selector : focus-visible ,
la forma más simple y posiblemente mejor de ahorrar accesibilidad es eliminar este enfoque engañoso solo para usuarios de mouse y guardarlo para usuarios de teclado :

1. Utilice este pequeño polyfill (aproximadamente 10kb): https://github.com/WICG/focus-visible
2.Agrega el siguiente código en algún lugar de tu CSS:

 .js-focus-visible :focus:not(.focus-visible) { outline: none; } 

Soporte de navegador de css4-selector: foco-visible ahora muy débil:
https://caniuse.com/#search=focus-visible

¡Eliminar el outline es terrible para la accesibilidad! Idealmente, el anillo de enfoque aparece solo cuando el usuario tiene la intención de usar el teclado .

Uso : foco-visible . Actualmente es una propuesta del W3C para diseñar estilos exclusivos de teclado mediante CSS. Hasta que los principales navegadores lo admitan, puede usar este robusto polyfill .

 /* Remove outline for non-keyboard :focus */ *:focus:not(.focus-visible) { outline: none; } /* Optional: Customize .focus-visible */ .focus-visible { outline-color: lightgreen; } 

También escribí una publicación más detallada en caso de que necesite más información.

Simplemente escriba el outline:none; . No es necesario usar el focus pseudo elemento