I have an Angular 13 application, and am using Angular Material. My problem is that the mat-select control doesn't look correct with the multiple option.
My code:
.ts
toppings = new FormControl('');
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
.html
<mat-form-field appearance="outline">
<mat-label>Toppings single</mat-label>
<mat-select [formControl]="toppings">
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Toppings multiple</mat-label>
<mat-select [formControl]="toppings" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
Result:
Why is that inner rectangle showing?
I found the problem, the select styling was being changed by the tailwind css forms module. I've removed that module and all is now ok.