14

我遇到了一个问题，即使用 routerLink 的 div 在单击时带有蓝色边框。我认为我遗漏了一些非常明显的东西，甚至可能是我在浏览器中的配置或遗漏了一些 css 样式，因此如果是这样，将不胜感激对修复的礼貌解释。

我在这里汇总了该问题的基本演示 - https://github.com/DavidStreid/routingIssue。创建此问题的代码片段位于 src/app/allGreetings.component.html，我将其放在下面。只需从根目录 /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;
    }
4

4 回答 4

30

它的 css 大纲属性，这对于可访问性非常重要，您可以在以下位置阅读更多信息：http ://www.outlinenone.com/

如果您仍然想这样做，只需添加

.paddingDiv:focus {
  outline: 0;
}

到你的 CSS

于 2017-04-16T18:10:23.327 回答
3

是的，批准的答案将从特定选择器中删除大纲。

如果您想从项目中的所有 [routerLink] 中删除轮廓，那么下面的 CSS 会更有帮助。

 *[ng-reflect-router-link]:focus {
   outline: none;
 }
于 2020-09-25T06:16:33.107 回答
3

不确定您使用的是哪个版本的路由器，但从版本 3 开始，您不能在除orrouterLink之外的任何其他元素上使用。abutton

如果您需要在 a 中使用它，div则将click事件与Routerand一起使用navigate。

于 2017-04-16T17:34:35.567 回答
0

只需在 css 中添加此样式：

.paddingDiv:focus {
   outline: none;
}

您可以将它用于使用路由器链接的每个 div 或使用：

 .paddingDiv:focus {
    outline: unset;
 }
于 2020-02-08T12:05:53.177 回答