Menu
Is there a possibility to change the default color of a checked checkbox (mat-pseudo-checkbox-checked):
<mat-selection-list #shoes>
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
I have tried:
.mat-pseudo-checkbox-checked {
background-color: #00f;
}
but it has no impact.
450
The accepted answer works fine, but it uses a hardcoded color value ( background: rgba (0, 139, 139, 0.7) ). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page).
The mat-list-option has mat-option.mat-active which triggered when option is active and mat-option.mat-selected when an option is selected. Add the following to your CSS to modify the active or selected styles, depends on your need. .mat-option.mat-active { background: blue !important; } .mat-option.mat-selected { background: red !important; }
The <mat-select> supports 2-way binding to the value property without the need for Angular forms. The <mat-select> also supports all of the form directives from the core FormsModule ( NgModel) and ReactiveFormsModule ( FormControl, FormGroup, etc.)
<mat-list> is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own. An <mat-list> element contains a number of <mat-list-item> elements. Use mat-nav-list tags for navigation lists (i.e. lists that have anchor tags).
Just add class="mat-primary" inside <mat-list-option>
<mat-selection-list>
<mat-list-option class="mat-primary" checkboxPosition="before" *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
Output:
71
answered Sep 20 '22 16:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With