我遇到过一个问题,使用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;
}
解决方法
它的css outline属性,这对于可访问性非常重要,您可以在：
http://www.outlinenone.com/阅读更多内容
如果你还想这样做只需添加
.paddingDiv:focus {
outline: 0;
}
对你的CSS
