To avoid border highlighting in mat-selection-list component

Viewed 4126

I am using mat-selection-list component in my project.I am displaying some names as shwon in below image:

enter image description here

I wonder, Why the border is highlighting on clicking scroll-bar as shown in above image, How can i avoid the 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'];
     }

The DEMO:

1 Answers

It's due to a CSS property called outline. To remove this, just add this line to your CSS class:

mat-selection-list {
   outline: none;
}
Related