避免mat-selection-list组件[重复]中的边框突出显示

Question

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

我想知道，为什么点击滚动条时会突出显示边框，如上图所示，我该如何避免边框在背景:

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'];
     }

演示：

Answer 1

这是由于一个名为outline的CSS属性。要删除此内容，只需将这一行添加到CSS类中：

mat-selection-list {
   outline: none;
}