Bootstrap 5 如何在单击 "Dropdown" 时将蓝色边框更改为下拉菜单中的其他颜色

Question

我正在使用 Bootstrap 5. 当您单击“下拉菜单”时，我试图将蓝色边框更改为与下拉菜单不同的颜色我试图在 css 中更改它, 但它并没有覆盖蓝色边框。如果有任何建议，我将不胜感激。

picture of dropdown blue border

这是一个link：https://www.codeply.com/p/PI41011ti0

<nav class="navbar navbar-expand navbar-dark bg-dark d-none d-md-flex" aria-label="navigation bar"> 
    <div class="container-fluid">
    <ul class="navbar-nav">
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
          </ul>
    </li>
    </ul>
    </div>
</nav>

Answer 1

这里是点击时元素的轮廓。您可以使用下面的 css 隐藏或更改颜色。

更改轮廓颜色：

.nav-link:focus {
    outline-color: #ffffff;
    outline-style: solid;
}

对于隐藏大纲：

.nav-link:focus {
    outline: 0;
}

您可以参考这里了解更多详情：https://www.w3schools.com/cssref/pr_outline-color.asp

Bootstrap 5 如何在单击 "Dropdown" 时将蓝色边框更改为下拉菜单中的其他颜色

Bootstrap 5 How to change the blue color border to a different color from dropdown menu when you click on "Dropdown"

drop-down-menu

bootstrap-5