To avoid border highlighting in mat-selection-list component

Question

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

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:

This is default behavior of angular. Its for accessibility feature. Whenever a popup or snackbar or any other overlay layout added the first element get selected as focus just to make the Tab button work. To disable it in your case mark tabindex="-1" — Rafique Mohammed, May 20 '19 at 06:39

score 5 · Accepted Answer · edited Jan 16 '20 at 17:44

5

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

edited Jan 16 '20 at 17:44

neural5torm

773
1
9
21

answered Nov 05 '18 at 10:59

João Deroldo

465
4
9

Its working fine in `stackblitz` but not in my project. – Empty_Soul Nov 05 '18 at 11:05
try by putting !important property. Ex: outline: none !important; – Surjeet Bhadauriya Nov 05 '18 at 11:06
I have tried `!important` property also – Empty_Soul Nov 05 '18 at 11:12
Check if really update your code after adding this property, i mean spect the element. – João Deroldo Nov 05 '18 at 11:13
I inspected it's not updated, means the `outline property` – Empty_Soul Nov 05 '18 at 11:16
Try to use one of this three property or all together `outline-style:none;` `box-shadow:none;` `border-color:transparent;` if any of this doesn't works, try to apply outline in the :focus – João Deroldo Nov 05 '18 at 11:34

To avoid border highlighting in mat-selection-list component

1 Answers1