0
893
VistasGoogle Chrome muestra un borde negro en el estado de enfoque para los estilos de agente de usuario de botón
Recientemente, estaba trabajando en un proyecto de diseño web y noté algo extraño después de la última actualización de Google Chrome. Se cambia el estilo de borde predeterminado (estilo de agente de usuario) para el botón, y me parece visualmente molesto.
¿Existe algún método para modificar/restaurar los estilos de navegador predeterminados, es decir, los estilos de agente de usuario de forma permanente?
Aquí hay algunas imágenes del problema: 
también he revisado otros sitios web e incluso google 
también revisé la herramienta de desarrollo, encontré estos estilos de borde aplicados en el estado de enfoque del botón 
7 Respuestas
Responde la pregunta0
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
0
ajustes en cromo > Apariencia > Mostrar un resaltado rápido en el objeto enfocado. Desactive esta opción.
0
Esto lo resolvió para mí:
chrome://flags/#form-controls-refresh
Y deshabilite esto: captura de pantalla
0
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
/* 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; }-
: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.
0
Hay 2 formas de manejarlo.
configuración en cromo que pocos han sugerido .
outline: 0px transparent !important;en estilo Ooutline: 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.
0
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
0
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.