Menu
Is there any way to remove the box-shadow from mat-chips in Angular Material?
<mat-chip-list>
<mat-chip>Papadum</mat-chip>
</mat-chip-list>
The chips appear to have a CSS style for the box-shadow, but disabling this style or overriding it doesn't work.
transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
I suspect there must be a simple way to disable this shadow, but I can't figure it out.
581
The box-shadow styles are used to pay attention to the content. Primer CSS Box Shadow Remove style is mainly used to remove the box-shadow. To remove the box-shadow, we will add an additional class . box-shadow-none.
Chips can be selected via the selected property. Selection can be disabled by setting selectable to false on the <mat-chip-list> .
The md-contact-chips, an Angular Directive, is an input control built on md-chips and uses the md-autocomplete element. The contact chip component accepts a query expression which returns a list of possible contacts. The user can select one of these and add it to the list of availble chips.
To all new readers coming to read this post. Apply this class in your 'mat-chip' element to remove z index. This will remove shadow also.
class="mat-elevation-z0"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
