如何移除Bootstrap 5.1.3自定义菜单按钮周围的深色线条

关闭offcanvas侧边菜单后按钮周围出现的深色线条，是Bootstrap 5默认给.navbar-toggler这类可交互按钮添加的焦点状态样式，包含外轮廓和投影效果。点击按钮触发侧边栏打开后，焦点会一直停留在这个触发按钮上；关闭侧边栏时焦点不会自动从按钮上移除，所以焦点样式会持续显示，点击页面其他区域让按钮失焦后，显示效果就会恢复正常。

两种方案可按需选择：

方案1：纯CSS覆盖焦点样式（实现成本最低） #

直接在项目的自定义样式文件中添加代码，覆盖按钮默认的焦点状态样式，不需要修改任何JS逻辑：

.navbar-toggler:focus {
  /* 移除默认的焦点轮廓和外阴影 */
  outline: none;
  box-shadow: none;

  /* 如需自定义焦点状态下的边框颜色，可在此处设置，例如 border-color: #yourcolor; */
}

如果你的自定义样式加载顺序早于Bootstrap默认样式，可以给上面的属性加上!important标记保证优先级生效。
出于无障碍访问规范要求，不建议完全移除焦点提示，可以将box-shadow调整为和项目设计风格匹配的柔和高亮色，方便使用键盘导航的用户识别当前选中元素。

方案2：关闭侧边栏时主动清除按钮焦点（保留原生焦点交互） #

如果你希望保留按钮默认的焦点样式（比如用户用Tab键切换到按钮时仍然有焦点提示），仅在侧边栏关闭后清除按钮的焦点状态，可以通过监听Bootstrap offcanvas的关闭完成事件实现。将下面的JS代码放在Bootstrap脚本引入标签之后即可：

const offcanvasNav = document.getElementById('offcanvasNavbar');
offcanvasNav.addEventListener('hidden.bs.offcanvas', function () {
  // 找到侧边栏对应的触发按钮，主动触发失焦
  const triggerBtn = document.querySelector('.navbar-toggler[aria-controls="offcanvasNavbar"]');
  triggerBtn.blur();
});

.navbar-toggler {
  border-color: red;
}

.navbar-toggler:hover,
.navbar-toggler:active {
  border-color: green;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='a' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26.348 18.684'%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill:%23e5231e;font-family:Verdana, Verdana;font-size:16.014px;%7D.c%7Bletter-spacing:0em;%7D.d%7Bletter-spacing:-.107em;%7D%3C/style%3E%3C/defs%3E%3Ctext class='b' transform='translate(0 13.829) scale(.815 1)'%3E%3Ctspan class='d' x='0' y='0'%3ET%3C/tspan%3E%3Ctspan class='c' x='8.148' y='0'%3Eest%3C/tspan%3E%3C/text%3E%3C/svg%3E");
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<header>
  <nav class="navbar fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" asp-page="/Index">Test</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Test Text</h5>
          <button type="button" class="ham-x" data-bs-dismiss="offcanvas" aria-label="Close">X</button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Contact" title="Contact Us">Contact Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" asp-area="" asp-page="./Privacy" title="Privacy">Privacy</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Something
              </a>
              <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
                <li><a class="dropdown-item" asp-page="./One" title="One">One</a></li>
                <li><a class="dropdown-item" asp-page="./Two" title="Two">Two</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

内容的提问来源于stack exchange，提问作者Turtle Head