避免在 mat-selection-list 组件中突出显示边框

Question

我mat-selection-list在我的项目中使用组件。我在下图中显示一些名称为 shwon：

我想知道，为什么点击滚动条时边框会高亮显示，如上图所示，我该如何避免border in the background：

HTML

 <mat-selection-list>
   <mat-list-option *ngFor="let player of Players">
     <a mat-list-item><span>{{ player }}</span> </a>
   </mat-list-option>
 </mat-selection-list>

CSS

 mat-selection-list{
 position:relative;
 margin-top:-20.5px;
 width:100%;
 height:80vh;
 overflow-y: scroll;
}
::ng-deep.mat-pseudo-checkbox{
 display: none !important;
}

TS

  import {Component,ViewChild} from '@angular/core';

  @Component({
     selector: 'list-selection-example',
     styleUrls: ['list-selection-example.scss'],
     templateUrl: 'list-selection-example.html',
   })

  export class ListSelectionExample {
       Players: string[] = ['Sachin Tendulkar', ........ 'Anil Kumble'];
     }

该DEMO：

Answer 1

这是由于名为outline. 要删除它，只需将此行添加到您的 CSS 类中：

mat-selection-list {
   outline: none;
}