How to change that black box shadow color to another color when we switch nav tabs by using Tab key?

The code:

<ul >
  <li >
    <a  aria-current="page" href="#">Active</a>
  </li>
  <li >
    <a  href="#">Link</a>
  </li>
</ul>

CodePudding user response：

EDIT as of December 1st 2022 (Chrome v107.0.5304.121)

It has nothing to do with Bootstrap. It was asked before.

This happens because of the Chrome v83 update and people don't like it.

Seems like in the past it was possible to disable black border when using ↹ (i.e., Tab key) the following ways:

• disable Web Platform Controls updated UI (source)
• disable this flag: chrome://flags/#form-controls-refresh (source) or
• go to chrome://settings/accessibility and disable Show a quick highlight on the focused object (source).

I was searching for a while, but was unable to disable black border in Chrome v107.0.5304.121.

Google says the black border is back and seems like there’s no way to get rid of it.