css - 在 Angular Material 中移除对 mat-button-toggle-group 的关注

Question

我从 Angular Material 网站获得了这段代码，当我在 Chrome 中使用它时，我将注意力集中在按钮上(就像每个选定按钮的蓝色边框)。

<mat-button-toggle-group name="fontStyle" aria-label="Font Style">
  <mat-button-toggle value="bold">Bold</mat-button-toggle>
  <mat-button-toggle value="italic">Italic</mat-button-toggle>
  <mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>

我尝试在 Css 中使用 outline:none 删除它，但它不起作用。

Answer 1

我认为 outlines 应该已经被棱 Angular Material 移除了。否则，您就走在正确的轨道上。

您需要添加以下 css:

.mat-button-toggle-button:focus {
  outline: none;
}

确保将其添加到您的全局 styles.css 而不是您的作用域组件样式中。如果这不起作用，请尝试添加 !important 以查看您的样式是否被覆盖。

Notice: Outlines provide visual feedback for links that have focus when navigating a web document using the TAB key (or equivalent). So they are really important for people with a visual impairment. If you remove them, always make sure to replace them with some other visual feedback on the focus state. Angular material does this by changing the background color.