Q:

How to keep Material Selection List highlight when losing focus?

I'm using an Angular Material selection list, like this -
<mat-selection-list #myItemsList [multiple]="false">
    <mat-list-option (click)="selectMyItem(item)" *ngFor="let item of myService.myItems">
        {{item.name}}
    </mat-list-option>
</mat-selection-list>

The list works OK, when I click on an item it changes colour as its highlighted. But when I then focus another control, the item reverts colour back to original. What I'd like is the item to remain highlighted to indicate its the item I am working on elsewhere on the form. If I select a different item from the list, the other item should not be highlighted, just the one I've clicked on. Thanks in advance for your time.

A:

In answer to my own question, the simple answer is to just use CSS
.mat-list-single-selected-option {
    background-color: blue;
}

