I have encountered an issue where divs using routerLink get bordered with blue when clicked. I think I am missing something very obvious, possibly even a configuration I have in my browser or some missed css styling, so a polite explanation of the fix would be appreciated if so.
I've put together a basic demo of the issue here - https://github.com/DavidStreid/routingIssue. The code snippet creating this issue is at src/app/allGreetings.component.html and I put it below. Just download and "npm install; npm start" from the root, /routingIssue, to see the issue by clicking on the different greetings. I'm seeing this in chrome.
<div *ngFor="let greeting of greetings"
class="col-xs-12 col-md-6 col-lg-4">
<div class="paddingDiv"
[routerLink]="greeting.routerLink">
<h3 class="greetingType">{{greeting.title}}</h3>
</div>
</div>
EDIT: Here's an updated version from unitario's suggestion where I still see the blue border -
<a *ngFor="let greeting of greetings"
class="col-xs-12 col-md-6 col-lg-4">
<a class="paddingDiv"
(click)="onSelect(greeting)">
<h3 class="greetingType">{{greeting.title}}</h3>
</a>
</a>
SOLUTION: From Shota Papiashvili. The outline comes from the focus selector. I don't want the border so I eliminated it and added another focus style -
.paddingDiv:focus {
outline: 0;
background-color: black;
}
its css outline property, this is very important for accessibility, you can read more at: http://www.outlinenone.com/
if you still want to do it just add
.paddingDiv:focus {
outline: 0;
}
to your css
Not sure which version of the router your are using but since version 3 you cannot use routerLink on any other elements than a or button.
If you need to use it in a div then use a click event together with Router and navigate.
Yup, the approved answer will remove the outline from a specific selector.
If you want to remove the outline from all [routerLink] across the project then below CSS will more helpful.
*[ng-reflect-router-link]:focus {
outline: none;
}