Bootstrap5中.navbar-toggler设置border:none不生效的解决方法

在Bootstrap 5前端开发中，尝试通过自定义CSS给.menu-bar容器下的.navbar-toggler折叠按钮设置border: none、outline: none样式，即便添加!important提升优先级，按钮边框依然可见。
对应自定义CSS代码：

.menu-bar .navbar-toggler{
    padding-right: 20px;
    outline: none!important;
    border: none!important;
}

对应HTML结构：

<div class="header">
  <div class="menu-bar">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <img src="{% static 'TableauDeBordMjc/images/logo_mjc.png' %}" alt="">
        
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav float-end">
            <li class="nav-item">
              <a class="nav-link" href="#">Accueil</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nouveau</a>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
               Logs
              </a>
              <ul class="dropdown-menu" >
                <li>
                  <a class="dropdown-item" href="#">Adhérents</a>
                </li>
                <li>
                  <a class="dropdown-item" href="#">Salariés</a>
                </li>
              </ul>
            </li>
            <li class="nav-item me-3 me-lg-0 dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                <i class="fas fa-user"></i>
              </a>
              <ul class="dropdown-menu pull-right" >
                <li>
                  <a class="dropdown-item" href="#">Déconnexion</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>

已正确引入Bootstrap 5官方JS文件：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

页面实际效果：

• 样式命中属性错误：Bootstrap 5的.navbar-toggler视觉上的边框效果不只有border属性生成：默认状态下navbar-light主题给按钮加了半透明border，同时按钮在默认、焦点、激活状态都默认设置了box-shadow阴影，这个阴影视觉上和边框高度相似，只清除border和outline、不处理box-shadow，自然无法完全去掉可见边框。
• 状态覆盖不全：原有选择器只匹配了按钮默认状态，没有匹配:focus（聚焦）、:active（点击激活）状态，这两个状态下Bootstrap会单独设置outline和box-shadow样式，点击按钮后依然会出现轮廓。
• 低概率排查点：如果自定义CSS文件引入顺序在Bootstrap CSS文件之前，同权重样式会被后加载的Bootstrap样式覆盖，不过添加!important后该问题基本不会出现。

1. 先调整CSS引入顺序：确保自定义CSS文件的<link>标签放在Bootstrap CSS的<link>标签之后，保证样式覆盖逻辑正确。
2. 替换原有自定义CSS代码，同时清除所有状态下的border、outline、box-shadow：

.menu-bar .navbar-toggler,
.menu-bar .navbar-toggler:focus,
.menu-bar .navbar-toggler:active {
    padding-right: 20px;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

保存后刷新页面即可看到按钮边框完全消失，点击/聚焦按钮也不会出现额外轮廓。

无障碍提示：直接移除焦点态outline会影响键盘导航用户的使用体验，如果需要兼顾无障碍，可以把outline替换为自定义的高对比度焦点样式，而不是完全移除。

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