单击后无法删除按钮边框，并且颜色不变

Question

我对HTML和CSS的使用几乎为零，我正在尝试创建一个简单的网站。 我有Bootstrap的按钮，我想要实现的是，当按下按钮时，它的文本将更改其颜色，并且没有边框。 这是我尝试过的：

.btn-secondary:active, .btn-secondary:focus { 
    color: aquamarine;
    outline: none !important;
}

但这不起作用。 结果如下：

更改颜色确实有效，但是我无法删除此灰色边框。我尝试查找Bootstrap文档，但找不到任何东西。 也尝试了几种不同的方法（例如轮廓样式等），但是仍然保持不变。

Answer 1

尝试使用border样式，如下面的代码-

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover { 
    color: aquamarine;
    border: 0 !important;
}

Answer 2

编辑：CSS支持焦点伪类，但并非所有浏览器都支持CSS。在几年中，更多地支持：focus，纯CSS解决方案很棒，但是在这个时候和这个地方，我强烈建议使用JS。

编辑第2部分：将let更改为var。

编辑第3部分：添加了对多个按钮的支持。

此代码包含一些JS。

<style>
  button {
    border: 1px solid black;
    color: white;
    font-size: 18px;
  }

  .buttonClicked {
    border: 0;
  }
</style>

<script>
  var clickedButtons = [];
  function onButtonClick(buttonsId) {
    var button = document.getElementById(buttonsId);
    if (clickedButtons.includes(buttonsId)) {
      button.className = '';
      clickedButtons.splice(clickedButtons.indexOf(buttonsId), 1);
    } else {
      button.className = 'buttonClicked';
      clickedButtons.push(buttonsId);
    }
  }
</script>

<button id="button1" onclick="onButtonClick('button1')">
  Button 1
</button>
<button id="button2" onclick="onButtonClick('button2')">
  Button 2
</button>
<button id="button3" onclick="onButtonClick('button3')">
  Button 3
</button>
<button id="button4" onclick="onButtonClick('button4')">
  Button 4
</button> 

Answer 3

您可以使用：

.btn-secondary:active, .btn-secondary:focus { 
    color: aquamarine;
    outline: 0;
    -moz-outline-style: none;
}