角垫按钮切换焦点覆盖颜色答案

【问题标题】：Angular mat-button-toggle focus overlay color角垫按钮切换焦点覆盖颜色
【发布时间】：2020-06-10 00:51:31
【问题描述】：

我在表单中有一个 mat-toggle-button-group：

<form [formGroup]="form" class="mb-4">
  <mat-button-toggle-group
    name="carrier"
    aria-label="Choose Carrier"
    #carrierSelection="matButtonToggleGroup"
    formControlName="carrierChoice"
    [value]="carrierChosen"
  >
    <mat-button-toggle [value]="carrier" *ngFor="let carrier of carriers">
      <img alt="Carrier: {{ carrier | uppercase }}" src="/assets/sending/images/carriers/{{ carrier }}/tab-logo.svg" />
    </mat-button-toggle>
  </mat-button-toggle-group>
</form>

当它被聚焦时，它坚持在按钮周围显示一个沉重的黑色边框，通过 Tab 键或单击。

我检查了 div <div class="mat-button-toggle-focus-overlay"></div> 并找到了这个：

所以，我首先尝试了这个：

.mat-button-toggle-checked .mat-button-toggle-focus-overlay {
  border-bottom: 0 !important;
  background-color: transparent !important;
}

不幸的是，黑线仍然很重，尽管现在检查它会显示我的覆盖：

我不明白。

接下来，我试试这个：

.mat-button-toggle-focus-overlay,
.mat-button-focus-overlay {
  box-shadow: var(--focus_shadow) var(--focus);
  background-color: transparent !important;
  border: 0 !important;
}

当我在应用程序中检查 <div class="mat-button-toggle-focus-overlay"></div> 时，它实际上显示它具有我的样式：

但黑线仍然存在。

【问题讨论】：

是否可以创建 stackblitz，因为我看不到它在这里发生：material.angular.io/components/button-toggle/examples
这可能是您正在使用的框架的副作用。看到您正在使用 Bootstrap 的 CSS 实用程序，Bootstrap 很可能也在为您的按钮设置主题以显示焦点边框或在单击时显示边框，因为按钮切换元素实际上使用了引擎盖下的按钮。
您也没有提供足够的信息来说明您正在使用的内容以及应用于按钮切换的所有 CSS（有意或无意）。此外，我建议您尝试切换 :focus 伪类选择器以查看元素上应用了哪些样式。
显然，Microsoft Edge Chromium 改变了他们的焦点风格（Chrome 也是如此）。 Firefox 仅显示其橙色虚线。对于键盘用户，我不希望将重点放在点击上。见web.dev/style-focus

标签： css angular angular-material

【解决方案1】：

显然，Chrome 最近更改了焦点处理，Edge Chromium 决定使用粗黑线进行焦点。

所以我将切换组包装在 DIV 中并设置：

.carrier-toggle {
  .mat-button-toggle-label-content,
  .mat-button-toggle-button,
  .mat-button-toggle {
    outline: none !important;
  }
}

然后我设置了自己的焦点样式，带有背景颜色。

.mat-button-toggle,
.mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {

  &:focus {
    background-color: var(--rich200);
    border: 0;
  }
}

【讨论】：