html - 组件打开后按钮的蓝色边框

Question

今天我的 HTML 组件中的关闭按钮遇到了一个奇怪的问题。即当我打开组件(客户的详细信息按钮)时，开头的关闭按钮被蓝色边框包围。单击组件上的任意位置后，边框消失。下图所示的问题:

我试图在我的 CSS 类中设置选项，如 outline: none 但它没有带来理想的结果。此外，当我复制相同的组件时:

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"(click)="onClose()">
    <span aria-hidden="true">&times;</span>
  </button>
  <button type="button" class="close" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
</div>

只有第一个关闭按钮有蓝色边框。

Customer-details.coponent.html

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"(click)="onClose()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<h4 class="modal-title w-100 font-weight-bold">Customer details:</h4>

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.name}}
</div>

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.email}}
</div>

<div *ngIf="(this.customer$ | async) as customer; else loading">
  {{customer.phoneNumber}}
</div>


<ng-template #loading>
  Loading stuff in ngIf...
</ng-template>

我想要实现的是组件打开后不出现这个蓝色边框。我不确定这是否是我的浏览器的问题，但目前我正在使用谷歌浏览器。感谢您就如何实现理想效果提出建议。

Answer 1

将 style="outline:none"添加到您遇到问题的任何 div。

如果它是一个按钮你可以这样做

button:focus {outline:none;}

  <button type="button" style="outline:none" class="close" data-dismiss="modal" aria-label="Close"(click)="onClose()">
        <span aria-hidden="true">&times;</span>
   </button>