something very, very strange has happened. Since a few hours, my Chrome (also IE) shows a different default outline on input. Inspecting the code I saw that the outline set is as follows:
outline: -webkit-focus-ring-color auto 1px
and result is like this:
happens both incognito and in navigation with or without extensions.
how can I restore it ?
I think you can achieve it with something like this
*:focus {
outline: 1px solid aliceblue
}
so you can define for all of your elements which outline to render on focus.
a similar question can be found here Chrome default focus outline
ps: although I think the new chrome outline is ugly as hell, don't forget that disabling it at all is a bad practice http://www.outlinenone.com/
cheers
it's a new "feature" of chrome 83....(that afflict all S.O.) I hope will be removed soon. https://support.google.com/chrome/thread/48974735?hl=en
The teams at Microsoft Edge and Google Chrome spent the last year collaborating to retheme and improve the functionality of the built-in form controls on Chromium browsers. ... The new focus indicator uses a thick dark ring with a thin white outline, which should improve visibility on both light and dark backgrounds. This is an easy accessibility win that automatically improves the keyboarding experience on a number of sites without developers needing to write any new code. What's New in Chrome 83
You could easily totally remove or customize the focus outline for all or any element that you want like below:
*:focus {
outline: none; /* or customize it */
}
*:focus {
outline: none !important; /* or customize it */
}
You have to add "!important".