为避免在垫选择列表组件中突出显示边框

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