Question

我想要实现的是以下显示（在另一个应用程序中看到），我想我没有关闭它：

在尝试重新创建时，我得到以下信息：

矿井无国界，但是我主要的头痛是，当它聚焦时，它会显示出深色的背景，如下所示：

更新：

如何在单击或打开背景时消除背景色？

<form action="" role="form">


          <div class="form-group">

              <!-- Ask the user which role they are -->
              <div ngbDropdown>
                  <button class="btn btn-outline-dark" id="dropDownRole" ngbDropdownToggle style="width: 100%;">
                      <span> Dude </span>
                </button>
                <div ngbDropdownMenu aria-labelledby="dropDownRole" style="width:100%;">
                  <button class="dropdown-item" style="width:100%">
                    Elim
                  </button>

                  <button class="dropdown-item" style="width:100%">
                      Elim 2
                    </button>
                </div>
              </div>
            </div>

</form>

Answer 1

更新

由于您仍然找不到问题，因此我检查了一下并找到了解决方案。将其添加到样式表中，并确保在引导css

后被加载

.btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-dark.dropdown-toggle:focus,
.btn-outline-dark:hover, .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active, .show > .btn-outline-dark.dropdown-toggle {
  color: #343a40;
  box-shadow: none;
  background-color: transparent;
}

当您使用Chrome浏览器检查器工具时，可以切换：hov 标签，选择元素的不同状态（请参见屏幕截图）

然后，您可以查看所添加的css以及例如当元素被聚焦时使用的样式。

在这种情况下，对焦时会将框阴影添加到按钮。您可以通过将box-shadow设置为none来禁用它。

.btn-outline-dark:focus {
    box-shadow: none;
}

Answer 2

用法类似于：<button class='btn btn-primary shadow-none'>Example button</button

删除使用btn-outline-dark

2 个答案: