Блог

У меня есть этот код с сайта 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>
  

Я пытался удалить это с помощью outline:none в Css, но это не работает.

Я думаю, что outlines уже должно быть удалено с помощью angular material. Если нет, то вы на правильном пути.

Вам нужно будет добавить следующий CSS:

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

Обязательно добавьте это в свои глобальные styles.css , а не в свои стили компонентов с ограниченной областью действия. Если это не сработает, попробуйте добавить !important просто для того, чтобы посмотреть, будут ли перезаписаны ваши стили.

Примечание: Контуры обеспечивают визуальную обратную связь для ссылок, которые есть focus при навигации по веб-документу с помощью клавиши TAB (или эквивалентной клавиши). Так что они действительно важны для людей с нарушениями зрения. Если вы удаляете их, всегда убедитесь, что заменяете их какой-либо другой визуальной обратной связью о состоянии фокусировки. Angular material делает это, изменяя цвет фона.