Border of div bound to routerlink directive?

Question

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;
    }

score 30 · Accepted Answer · answered Apr 16 '17 at 18:10

30

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

answered Apr 16 '17 at 18:10

Shota Papiashvili

690
5
14

That was it! Thank you so much. This was troubling me all weekend. I'll take a look at the doc – David Streid Apr 16 '17 at 18:13
Worked in Angular 9. – Naveen Kumar V Dec 08 '20 at 12:49

score 3 · Answer 2 · answered Apr 16 '17 at 17:34

3

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.

answered Apr 16 '17 at 17:34

unitario

6,295
4
30
43

Thanks. Unfortunately even when I removed the binding to routerLink and replaced it with your suggestion, I still see the blue border. I also tried changing the tag from div to a with the same result. Any other ideas? – David Streid Apr 16 '17 at 18:01

score 3 · Answer 3 · answered Sep 25 '20 at 06:16

3

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;
 }

answered Sep 25 '20 at 06:16

Prakash Rajotiya

1,013
5
11

it works in chrome but not iOS app built with Ionic. – raykin Dec 16 '20 at 12:06

heliya rb · Answer 4 · 2020-02-08T12:18:48.800

0

just add this style in css:

.paddingDiv:focus {
   outline: none;
}

you can use it for every div that uses router link or use:

 .paddingDiv:focus {
    outline: unset;
 }

edited Feb 08 '20 at 12:18

answered Feb 08 '20 at 12:05

heliya rb

682
8
26

Border of div bound to routerlink directive?

4 Answers4