今天我的 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">×</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">×</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>
我想要实现的是组件打开后不出现这个蓝色边框。我不确定这是否是我的浏览器的问题,但目前我正在使用谷歌浏览器。感谢您就如何实现理想效果提出建议。
最佳答案
将 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">×</span>
</button>
关于html - 组件打开后按钮的蓝色边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57147572/