使用 CSS 删除导航栏切换器汉堡图标的边框颜色

Question

我已经陷入困境很长时间了。搜索并尝试了许多方法来删除单击BS4汉堡图标的边框颜色(在我的本地，它显示为黄色。在此片段中，它是蓝色的(

谁能帮忙解决这个问题？感谢您的帮助！

这是我的代码：

<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fa fa-navicon"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link active" routerLink="/about" routerLinkActive="active">
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/projects" routerLinkActive="active">
<span>Projects</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact" routerLinkActive="active">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Answer 1

这在 Bootstrap 4 中对我有用。

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}

请注意：大纲存在有一个重要原因，可访问性！特别是对于不能使用鼠标或有视力障碍的人。请参阅 http://www.outlinenone.com/，并考虑在切换器处于活动/焦点状态时向其添加一些其他样式。

Answer 2

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
border: none;
box-shadow: none;
}

Answer 3

在单击引导导航栏图标的汉堡图标时更改或删除边框颜色。您需要进入bootstrap.min.css文件并转到button:focus类。在那里更改它或完全删除outline。这样：

button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focusring-color;
}

Answer 4

实际上对于 Bootstrap，他们不使用边框作为导航focus而是使用大纲

您可以将其删除宽度：

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
outline: none!important;
}

希望这个帮助：>

button.navbar-toggler.ml-auto.hidden-sm-up.float-xs-right:focus {
outline: none!important;
}

<nav class="navbar sticky-top navbar-expand-lg" style="background-color: #eeeeee">
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fa fa-navicon"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link active" routerLink="/about" routerLinkActive="active">
<span>About</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/projects" routerLinkActive="active">
<span>Projects</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact" routerLinkActive="active">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

Answer 5

从 Bootstrap v5.1.3 开始，这对我有用：

.navbar-toggler {
border: none;
outline: none;
&:focus,
&:active,
&-icon:focus {
outline: none;
box-shadow: none;
}
}

Answer 6

对于 Bootstrap v5.1.3：

.navbar-toggler:focus,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}

Answer 7

BS5 的解决方案：

没有必要用额外的css类覆盖BS。官方方法是自定义 Bootstrap 本身。对于实际的 Bootstrap 5.2.3，有两种可能性可以做到这一点：

(1( 如果引导程序是由 SASS 生成的，请将以下设置变量更改为以下值：

$navbar-toggler-padding-y:          0;
$navbar-toggler-padding-x:          0;
$navbar-toggler-font-size:          1.5rem;
$navbar-toggler-border-radius:      0;
$navbar-toggler-focus-width:        0;
$navbar-toggler-transition:         none;
$navbar-light-toggler-border-color: none;
$navbar-dark-toggler-border-color:  none;

链接到引导页面，了解如何通过 SASS 变量自定义框架 https://getbootstrap.com/docs/5.2/customize/sass/

注意：在 BS4 中也可以通过 SASS 自定义引导程序。但变量可能不同。

(2( 如果您不使用 SASS 而是使用静态引导程序文件，您可以通过自定义 BS-Setting-CSS 变量来自定义引导程序：

创建一个 Bootstrap-CSS-Settings-File，并将其包含在静态 Bootstrap-CSS-File 之后，保存到您的 HTML 页面中。在此处添加要重新定义的变量。在这种情况下，您必须建议特殊元素类的变量：

.navbar {
--bs-navbar-toggler-padding-y: 0;
--bs-navbar-toggler-padding-x: 0;
--bs-navbar-toggler-font-size: 1.5rem;
--bs-navbar-toggler-border-color: none;
--bs-navbar-toggler-border-radius: 0;
--bs-navbar-toggler-focus-width: 0;
--bs-navbar-toggler-transition: none;
--bs-navbar-toggler-border-color: rgba(0, 0, 0, 0.1);
}
.navbar-dark {
--bs-navbar-toggler-border-color: none;
}

注意：BS5 中引入了在更高级别上通过 CSS 变量自定义引导程序。变量在不同的子版本中发生了变化。显示的变量在 5.2.3 中工作

---

问题是关于BS4的。添加了 BS5 的解决方案，因为搜索引擎显示此答案，即使搜索是关于 BS5 的。这是对原始问题的附加答案。

Answer 8

.navbar-toggler {
border:0px;
}

这对我有用

Answer 9

试试这个！它对我有用。

.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0) !important;
border-color: rgba(255, 255, 255, 0) !important;
}

Answer 10

button:focus {
outline: none;
outline: none -webkit-focus-ring-color;
}

Answer 11

这是我使用SCSS(Sass( 提供的解决方案：

.navbar-toggler {
&:focus,
&:active {
outline: none;
box-shadow: none;
}
}
.navbar-toggler-icon {
background-image: none;

&:focus {
outline: none;
box-shadow: none;
}
}