Css 如何为垫子制作圆角 Select 所有角点上的下拉列表

发布于02月08日

我在Angular,Angular Material和css有一个mat-select的下拉列表

如何为垫 Select 下拉菜单创建圆角？

EDIT个

我正在使用下面的css来使下拉面板出现圆角.但看起来滚动条凌驾于此之上.

.custom-panel-siteId {
  margin: 40px 0px !important;
  min-width: 310px !important;
  margin-left: 17px !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

推荐答案

这是可行的，你可以用下面的政务司司长来做.但你需要注意几点

此更改将应用于具有类cdk-overlay-pane的所有 Select 组件和元素，我们不能将修复仅隔离到一个 Select
最好不要进行此修复，因为我们不能确定它会对用户界面产生什么影响

政务司司长

// to add curved edges
.cdk-overlay-pane {
  overflow: hidden !important;
  border-radius: 5px !important;
}

HTML

<mat-form-field appearance="outline" class="form-field-custom">
  <mat-select
    class="frequency-dimensions"
    formControlName="frequency"
    (change)="disableSubmitButton=false"
    disableOptionCentering
    panelClass="custom-panel-frequency"
  >
    <mat-option value="daily" selected>Daily</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
    <mat-option value="total">Total</mat-option>
  </mat-select>
</mat-form-field>