Remove Blue Box Outline from Google Chrome

necolas / normalize.css

A modern alternative to CSS resets

http://necolas.github.io/normalize.css/

MIT License

52.48k stars 10.67k forks source link

Remove Blue Box Outline from Google Chrome #762

Closed araligan closed 5 years ago

araligan commented 6 years ago

https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome

Maybe this one should be included on the normalization. Thanks :)

garrettw commented 6 years ago

It's there for accessibility. Check out this article I found that discusses how to remove outlines without impacting accessibility.

Malvoz commented 6 years ago

Removing the outline makes it ~~impossible~~ very hard for keyboard-only users to navigate your website, unless you add custom :focus styling in a manner where it is clear to the user that an element is focused.

Take a look at :focus-visible, it hasn't been finalized nor implemented widely yet so you will have to use the polyfill.

For more info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

kotAPI commented 6 years ago

Maybe this issue can be closed now?