How can I remove the black outline when i focus on the certain component.

[TammyCT]

after I upgrade my project to bootstrap v4.5.0, I found that when i focus on some component, the black outline will show, but i don't want this. how can i remove the focus outline globally?

[patrickhlauke]

That's the browser's default focus outline, which is essential for keyboard users to be able to use a site. There are currently no plans for us to remove/suppress this.

Incidentally, you're looking at https://getbootstrap.com/docs/4.5/content/reboot/ which simply shows the default behavior of the browser for focus.

https://getbootstrap.com/docs/4.5/components/forms/ shows slightly modified/softened focus styling that bootstrap uses.

http://www.outlinenone.com/

[TammyCT]

I do agree the outline is useful for the hotkey action, which is really user-friendly. My project is in bootstrap v4.0.0-alpha.6, which is not outline when i focus on the component. Now I want to upgrade the boostrap to v4.5.0, but i want to consist the focus style as my old version looks like. How could I set my css to remove the outline, beacuse the outline is in all most every component such as button, input, grid cell etc.

[TammyCT]

i have set grid .ag-cell-focus style to outline:none, the issue can be fixed