Chrome中使用Tab键切换导航标签时修改黑色焦点阴影颜色的方法

Bootstrap导航链接通过Tab键切换获得焦点时，默认的黑色焦点阴影由box-shadow属性控制，只需自定义CSS覆盖该样式就能修改颜色。

实现步骤 #

1. 保留原有的HTML结构：

<ul class="nav nav-tabs m-5">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

2. 添加自定义CSS覆盖焦点状态的阴影样式：

/* 覆盖导航标签链接的焦点阴影 */
.nav-tabs .nav-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); /* 替换为你需要的颜色值 */
}

/* 可选：针对现代浏览器优化可访问性焦点样式 */
.nav-tabs .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

颜色修改说明 #

你可以替换代码中的颜色值为任意样式：

• 红色阴影示例：rgba(220, 53, 69, 0.25)
• 实色带透明度阴影示例：0 0 0 0.2rem #ff6b6b80（#ff6b6b为实色，80为透明度）

内容的提问来源于stack exchange，提问作者Aniket Pradhan