无法删除引导按钮边框

Question

我有一个自定义引导程序按钮，单击后无法删除其边框。我能够改变它的背景颜色，但有一个坚持不懈的蓝色边框让我感到厌烦。

我点击它，它打开一个模式窗口，关闭模式后，边框仍然存在，直到我点击页面的另一部分，即使我更改了 :active 和 :focus 中的值.

网页格式：

 <button id="openPopup" type="button" class="btn btn-primary btn-lg text-uppercase" data-toggle="modal" data-target="#myModal">
    some text here
</button>

CSS ：

 #openPopup {
  padding: 20px 30px;
  background-color: #a2238e;
  border-color: #a2238e;
  box-shadow: 1px 1px 1px #999;
  white-space: normal;
  font-size: smaller;
  letter-spacing: 0.2px;
}

#openPopup:hover, #openPopup:active, #openPopup:focus {
  background-color: #912284 !important;
  border-color: #912284 !important;
}

原文由 madsongr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这个

#openPopup:focus {
    outline: none;
}

或者

#openPopup:focus {
    outline: 0;
}

原文由 Troyan Victor 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Bootstrap 4.5.0 上你可以试试

<button class="btn btn-primary shadow-none">ADD TEXT HERE</button>

这个对我有用。

原文由 Fabio Duarte 发布，翻译遵循 CC BY-SA 4.0 许可协议