css 更改材质选择下拉菜单的边界半径和高度？

j9per5c4 于 2022-12-05 发布在其他

关注(0)|答案(1)|浏览(147)

在这个Angular Material Select dropdown demo中，我内嵌了一个边框半径和高度样式的更改，但它没有更改边框半径或高度。

<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>

我们如何更改边界半径和字段高度？

css

来源：https://stackoverflow.com/questions/74593187/changing-the-border-radius-and-height-of-a-mat-select-dropdown

1条答案

按热度按时间

u7up0aaq1#

您需要定位表单字段类
请尝试以下代码：

将custom-field类添加到表单字段元素
使用ng-deep覆盖mat-form-field-flex、mat-form-field-outline-end和mat-form-field-outline-start类

第一个

适用于材料15

将类名更改为mat-mdc-form-field-flex、mdc-notched-outline__trailing和mdc-notched-outline__leading

.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;
}

要使内容居中，请添加以下样式

.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;
}

赞(0）回复(0）举报 2022-12-05

我来回答

css 更改材质选择下拉菜单的边界半径和高度？

1条答案

相关问题

热门标签

最新问答