angular – div的边框绑定到routerlink指令？

发布时间：2020-12-17 17:06:18 所属栏目：安全来源：网络整理

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

我遇到过一个问题,使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!