角度材质按钮删除自动对焦

Question

我有以下按钮

<td mat-cell *matCellDef="let element">
  <button mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
  </button>
</td>

一切都很好，但我注意到默认情况下会概述小bug：

好的...。CSS使我可以删除以下内容的烦人的轮廓：

button:focus {
    outline: none;
}

但是然后..我仍然得到这个令人讨厌的默认背景焦点：

我在CSS中尝试了一些与叠加层和背景相关的东西，但这些似乎都没有解决这个问题。如何删除此默认背景？为什么它的默认行为如此？？？

请参阅开发工具中的选定项目。

Answer 1

单击或触摸 Material Design 按钮后，它会保持聚焦 ---> 要解决此问题，您需要添加以下代码： onclick="this.blur()"

<button mat-raised-button  onclick="this.blur()" (click)="onEdit()">Edit</button>

或者在你的情况下

<td mat-cell *matCellDef="let element">
    <button mat-icon-button type="button" onclick="this.blur()" (click)="downloadStuff(element)">
        <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
    </button>
</td>

Answer 2

通过在其他项目上设置属性cdk-focus-start，我能够摆脱默认的焦点按钮。此处提供更多信息

Answer 3

在您的样式 css 中，只需添加此代码。它将从所有按钮中删除那些烦人的轮廓

button:focus {
    outline: none !important;
}

Answer 4

就我而言，真正的问题是按钮的结构。Angular Material构建各种子组件，最后一个是具有CSS类的'div' mat-button-focus-overlay：

我的解决方法很简单。在style.css添加或覆盖中mat-button-focus-overlay：

.mat-button-focus-overlay {
    background-color: transparent!important;
}

Answer 5

也试试这个。

<button mat-icon-button [autofocus]="false" (click)="closeDialog()">
  <mat-icon>clear</mat-icon>
</button>`

只需添加[autofocus].

Answer 6

问题有点老了。但我为此找到了更好的解决方案。

将tabindex="-1"添加到按钮标签，问题就解决了！

<button tabindex="-1" mat-icon-button type="button" (click)="downloadStuff(element)">
    <mat-icon mat-icon matTooltip="{{element.someId}}">picture_as_pdf</mat-icon>
</button>