div的边界绑定到routerlink指令？

Question

我遇到过一个问题,使用routerLink的div在点击时会以蓝色为边界.我想我错过了一些非常明显的东西,甚至可能是我在浏览器中的配置或者一些错过的CSS样式,所以如果是这样,那么对修复的礼貌解释将会受到赞赏.

我在这里汇总了这个问题的基本演示 - https://github.com/DavidStreid/routingIssue.创建此问题的代码段位于src/app/allGreetings.component.html,我把它放在下面.只需从root,/ routingIssue下载并"npm install; npm start",点击不同的问候语即可查看问题.我在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>

编辑:这是来自unitario的建议的更新版本,我仍然看到蓝色边框 -

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

解决方案:来自Shota Papiashvili.轮廓来自焦点选择器.我不想要边框,所以我删除它并添加了另一种焦点风格 -

    .paddingDiv:focus {
        outline: 0;
        background-color: black;
    }

Answer 1

它的css outline属性,这对于可访问性非常重要,您可以在以下网址阅读更多信息:http://www.outlinenone.com/

如果你还想这样做只需添加

.paddingDiv:focus {
  outline: 0;
}

对你的CSS