Mat-selection-list remove highlight

1.1k Views Asked by At

When I click on an option is mat-selction-list then it remains highlighted

enter image description here

However, I want to remove the highlight because clicking on this option opens a dialog, and when closing the dialog I want to have the list back to normal state:

enter image description here

Any idea how to do this?

Code:

      <mat-selection-list #members
                          fxLayout="row"
                          [multiple]="false"
      >
        <mat-list-option *ngFor="let item of links"
                         fxFlex="50%"
                         class="fs-24 mb-10"
        >
          <a class="fs-24 black" (click)="openDialog(item.key)">
            <div fxLayout="column" fxLayoutAlign="center center">
              <div class="fs-24 mb-5">{{registrationsAll | countIfInData: 'status' : item.key}}</div>
              <div>{{ item.name }}</div>
            </div>
          </a>
        </mat-list-option>
      </mat-selection-list>

1

There are 1 best solutions below

0
On BEST ANSWER

Solved thanks to @zainhassan suggestion !

CSS

.mat-list-option {
  background: transparent;
}