We can change the general panel css style using panelClass.

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" panelClass="select-style">
    <mat-option *ngFor="let topping of toppingList" [value]="topping"
      >{{topping}}</mat-option
    >
  </mat-select>
</mat-form-field>

And the style:

.select-style {
  font-size: 2px !important;
  border-radius: 20px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 12px !important;
  height: 10rem;
}

This is a stackblitz demo.

All the settings are taking effect except for the font-size. It does not change. Any ideas on how to change the font size for the panel?

CodePudding user response：

Try this

.select-style {
  border-radius: 20px !important;
  border: 1px solid gray !important;
  position: absolute !important;
  top: 12px !important;
  height: 10rem;
}
.select-style mat-option{
  font-size: 8px !important;
}

Reason: The font-size is being set on the mat-option inside .select-style as

<mat-option role="option" 
 ...>...<mat-option>

css

.mat-mdc-option {
    /*...*/
    font-size: var(--mdc-typography-body1-font-size, 16px);
    /*...*/
}

We have to override the mat-option font-size set.