Reputation: 1287
Today I met a strange problem with the close button in my HTML component. Namely when I am opening component(Details button for the customer) the close button at the beginning is surrounded by a blue border. After clicking anywhere on the component, the border disappears. The problem shown in the photo below:
I was trying to set the option in my CSS class like outline: none but it not brought desirable result. Moreover, when I will duplicate the same component:
<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>
only first close button has blue border.
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>
All I want to achieve is not appearing this blue border after component opening. I am not sure if it is a problem with my browser but currently I am using google chrome. Thanks for suggestions on what I suppose to do to achieve a desirable effect.
Upvotes: 1
Views: 1488
Reputation: 2431
A good practice to avoid this kind of issue is to reset CSS : https://meyerweb.com/eric/tools/css/reset/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Upvotes: 1
Reputation: 10975
To resolve this issue, use below css to resolve blue border line which is due to default button focus style, please refer this link - What is the default style of the blue focus outline in Chrome?
CSS to fix this issue :
button:focus {
outline: 0;
}
Upvotes: 1
Reputation: 823
Add style="outline:none" to whichever div you have problem with.
If it's a button you can do like this
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>
Upvotes: 4