Strange outline appears in Chrome 83/IE on my Windows 10

Question

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 ?

@Diggy. how can I restore the default outline? – r1si May 20 '20 at 18:48 — r1si, May 20 '20 at 18:48
That is now the new default outline – Jason Jun 10 '20 at 13:43 — Jason, Jun 10 '20 at 13:43

score 1 · Answer 1 · answered May 25 '20 at 10:06

1

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

answered May 25 '20 at 10:06

AjejeBrazorf

163
1
1
8

1

Note: the color matters, as the color needs to have a contrast ratio of 3:1 to the background for accessibility – Jason Jun 10 '20 at 13:44

score 1 · Accepted Answer · answered May 29 '20 at 15:43

1

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

answered May 29 '20 at 15:43

r1si

1,136
2
19
34

score 0 · Answer 3 · answered Jun 18 '20 at 18:26

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 */
}

For anyone looking for the color value of the NEW focus ring styling in Chrome 83, it's: rgb(0, 33, 245) or #0021F5 (-webkit-focus-ring-color) — ChrisN, Jun 19 '20 at 17:47

score 0 · Answer 4 · answered Jul 26 '20 at 19:18

0

*:focus {
   outline: none !important; /* or customize it */
}

You have to add "!important".

answered Jul 26 '20 at 19:18

andyJK

49
2

Strange outline appears in Chrome 83/IE on my Windows 10

4 Answers4