What is the default style of the blue focus outline in Chrome? What is the default style of the blue focus outline in Chrome? google-chrome google-chrome

What is the default style of the blue focus outline in Chrome?


To answer the question, Webkit browsers use outline: 5px auto -webkit-focus-ring-color;. On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700) (ref).

While I understand your desire for consistency, users generally only use one browser, and are used to their browser’s default styles. Note that unless you plan to change every instance of :focus you’ll end up with inconsistency for e.g. keyboard users. Pros and cons eh!

If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help

.myClass:focus {  outline: 1px dotted #212121;  outline: 5px auto -webkit-focus-ring-color;}