无法删除引导按钮边框

时间:2018-04-14 21:06:06

标签: javascript jquery html css

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

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

enter image description here

HTML

<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;
}

6 个答案:

答案 0 :(得分:5)

在Bootstrap 4.5.0上,您可以尝试

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

对我有用。

答案 1 :(得分:3)

尝试一下

<button type="button" class="btn btn-link">Link</button> Bootstrap

答案 2 :(得分:0)

试试这个

#openPopup { outline:none; border-style: none; }

#openPopup:hover, #openPopup:active, #openPopup:focus { outline: none; border-style: none; }

答案 3 :(得分:0)

试试这个

#openPopup:focus {
    outline: none;
}

#openPopup:focus {
    outline: 0;
}

答案 4 :(得分:0)

在 Bootstrap 4.6.0 上你可以试试这个

#openPopup {
    border: none;
    box-shadow: none;
}

答案 5 :(得分:-1)

尝试删除边框:focus和:active

#openPopup:active, #openPopup:focus { 
   border-style: none !important;
}