Changing the Border Radius and Height of a Mat Select Dropdown?-CodePudding

In this Angular Material Select dropdown demo I've inlined a border radius and height style change but it does not change the border radius or the height.

<mat-form-field appearance="outline" style="border-radius: 25px; height: 10px">
  <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>

How do we change the border radius and the height of the field?

CodePudding user response：

You need to target the form-field classes

Try the below code:

add a class to the form field element
using ng-deep override mat-form-field-flex, mat-form-field-outline-end and mat-form-field-outline-start classes

::ng-deep .custom-field .mat-form-field-flex{
  height: 10px;
}

::ng-deep .custom-field .mat-form-field-flex .mat-form-field-outline-end{
  border-radius: 0 25px 25px 0;
}

::ng-deep .custom-field .mat-form-field-flex .mat-form-field-outline-start{
  border-radius: 25px 0 0 25px ;
  width: 25px !important;
}

<mat-form-field appearance="outline" >
  <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>

For Material 15

Change the class names to mat-mdc-form-field-flex, mdc-notched-outline__trailing and mdc-notched-outline__leading

.custom-field .mat-mdc-form-field-flex {
  height: 10px;
}

.custom-field .mat-mdc-form-field-flex .mdc-notched-outline .mdc-notched-outline__trailing {
  border-radius: 0 25px 25px 0;
}

.custom-field .mat-mdc-form-field-flex .mdc-notched-outline .mdc-notched-outline__leading {
  border-radius: 25px 0 0 25px;
  width: 25px !important;
}

To centre the contents add these styles

.custom-field .mat-mdc-form-field-flex {
  height: 42px;
  align-items: center;
}

.custom-field .mat-mdc-form-field-flex .mdc-notched-outline .mdc-notched-outline__notch label {
  top: 50%;
}

.custom-field .mat-mdc-form-field-flex .mdc-notched-outline .mdc-notched-outline__notch label.mdc-floating-label--float-above {
  top: 28px;
}