删除Bootstrap中的按钮框阴影

Question

我有一个带有btn类引导程序的按钮，点击它后，它会显示一个蓝色边框：

<button id="userButton" (click)="onMenu()" class="btn"></button>

＆＃13;

＆＃13;

.test {
  border-color: #FFFFFF;
  outline: none;
}

＆＃13;

<button id="userButton" (click)="onMenu()" class="btn test"></button>

＆＃13;

＆＃13;

＆＃13;

但它一直出现。有什么想法吗？

Answer 1

蓝色轮廓可能是由Bootstrap的:focus类的.btn选择器引起的。将其添加到.test类，应该工作：

.test:focus {
  border-color: #FFFFFF;
  outline: none;
}

<button id="userButton" (click)="onMenu()" class="btn test"></button>

Answer 2

.test {
  border-color: hidden;
  outline: none;
}

<button id="userButton" (click)="onMenu()" class="btn test"></button>

你想摆脱那个边界吗？

  

border-color：hidden