Ir al navegador de escritorio Chrome

configuración->Avanzado->Accesibilidad->(Desactivar)Mostrar un resaltado rápido en el objeto enfocado

para evitar los cuadros de sombra cuando haces clic en tu navegador

ajustes en cromo > Apariencia > Mostrar un resaltado rápido en el objeto enfocado. Desactive esta opción.

Esto lo resolvió para mí:

chrome://flags/#form-controls-refresh

Y deshabilite esto: captura de pantalla

El problema no es el nuevo anillo de enfoque de contraste de Chromium, es el comportamiento predeterminado en todos los navegadores que al hacer clic activa el anillo de enfoque.

El anillo de enfoque aparece al hacer clic cuando la apariencia del <button> se modifica o recibe el atributo tabindex .

La accesibilidad es imprescindible y el nuevo anillo de enfoque en blanco y negro en contraste es un gran paso adelante. Sin embargo, hay desarrolladores (incluyéndome a mí) que no quieren que el anillo de enfoque esté presente cuando se usa el mouse.

Soluciones

1. polyfill visible al foco

 /* This will hide the focus indicator if the element receives focus via the mouse, but it will still show up on keyboard focus. */ .js-focus-visible :focus:not(.focus-visible) { outline: none; }

si está usando un marco que anula las clases, use los atributos visibles de enfoque.

 [data-js-focus-visible] :focus:not([data-focus-visible-added]) { outline: none; }

2. :focus-visible . Chrome y Firefox ahora admiten esta propiedad. Actualmente, Safari no tiene soporte. Compatibilidad del navegador MDN

 /* This will hide the focus indicator if the element receives focus via the mouse, but it will still show up on keyboard focus. */ button:focus:not(:focus-visible) { outline: none; }

Tenga en cuenta que para los usuarios de dispositivos móviles, si hay un elemento que hace que aparezca el teclado en pantalla, como <input type="text"> , debe tener una indicación visual de que está enfocado.

Hay 2 formas de manejarlo.

1. configuración en cromo que pocos han sugerido .

2. outline: 0px transparent !important; en estilo O outline: none !important; Ambos me han funcionado.

Dado que no podemos obligar al usuario a realizar la configuración, sugeriría una segunda opción, pero es un proceso largo. Si tiene alguna forma más corta, infórmenos.

Podría intentar deshabilitar esta bandera: chrome://flags/#form-controls-refresh

Aparentemente, la versión 83+ de Chrome cambió la forma en que se procesan / manejan los formularios: https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

Aquí hay una página de soporte de Google relevante que enlaza con la publicación de blog anterior: https://support.google.com/chrome/thread/48974735?hl=en

Esto se debe a la nueva actualización de Chrome https://developers.google.com/web/updates/2020/05/nic83#forms

puede anular el contorno negro en la mayoría de los casos

 *,*:focus,*:hover{ outline:none; }

y puedes ver este articulo

https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator

si desea eliminar el contorno solo para el usuario del mouse.