angular material selector's ListBox

Question

I want to style only mat-select's ListBox width (the box that appears after the selector is opened). Do you know how to do it?

I tried styling the width of mat select, but is allsow styles listBox's width?

<mat-form-field
  appearance="outline"
  [formGroup]="formGroup"
  [ngClass]="_field?.formFieldClass || ''"
>
  <mat-label *ngIf="_field?.label"> {{ _field.label }} </mat-label>
  <mat-select
    [formControlName]="_field.name"
    [placeholder]="_field?.placeholder || _field?.label || ''"
  >
    <mat-optgroup *ngIf="_field?.options?.length === 0">
      <div>No results found!</div>
    </mat-optgroup>
    <mat-option [hidden]="true"></mat-option>
    <mat-option
      *ngFor="let item of _field?.options"
      [value]="item?.key || item.value"
    >
      {{ item.value }}
    </mat-option>
  </mat-select>
  <ng-container
    *ngFor="let validation of _field?.validations"
    ngProjectAs="mat-error"
  >
    <mat-error *ngIf="formGroup.get(_field.name)?.hasError(validation.name)">{{
      validation.message
    }}</mat-error>
  </ng-container>
</mat-form-field>

is there any way to style only listBox ?

Answer 1

div[role="listbox"] {
   width: 100px !important;
}