To avoid border highlighting in mat-selection-list component

1547 views css
2

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:

answered question

set outline:none

1 Answer

1

Its a propriet on css called outline to remove this just add this line on your main class

mat-selection-list{
   outline: none;
}

posted this

Have an answer?

JD

Please login first before posting an answer.