angularjs - md-card 和 ng-click 给出烦人的蓝色边框

Question

尝试找出在 md 卡上使用 ng-click 时如何摆脱烦人的突出显示。基本上，我所做的就是设置一个 MD 卡并添加一个并单击它。

<md-card ng-click="showart(sketch.id)" class="magazinecard">
        <md-card-header>
        <md-card-header-text>
        <span class="md-headline">{{sketch.name}}</span>
        <span class="md-subhead">By user: {{sketch.owner}} data: </span>
        </md-card-header-text>
        </md-card-header>
        <img data-ng-src="data:{{image.type}};base64,{{image.data}}"/>
        <md-card-content style="background-color: white; color: black;"><div style="width: 325px;" ng-bind-html="sketch.description"></div></md-card-content>
        <md-card-content layout="row" layout-align="space-between">
        <md-card-actions layout="row">
        <md-button class="md-icon-button" aria-label="Favorite">
        <ng-md-icon size="20px" icon="favorite"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="Share">
        <ng-md-icon size="20px" icon="share"></ng-md-icon>
        </md-button>
        <md-button class="md-icon-button" aria-label="Settings">
        <ng-md-icon size="20px" icon="delete"></ng-md-icon>
        </md-button>
        </md-card-actions>
        </md-card-content>
        </md-card>

当我点击 md-card 时，整个卡周围出现一条蓝线，我不知道如何控制它。尝试更改 md-card:focus 和 .md-card:focus，但没有任何结果

.md-card:focus {
  border-color: #7b007b;
}

Answer 1

您正在寻找outline:none和border:0。只需将其添加到您的 css 选择器中，如下所示:

.md-card:focus {
    outline: none;
    border: 0;
 }

我不确定它是否一定是 .md-card，因为我看不到它正在运行，但蓝色边框来自 :focus。