Html 更改Angular 为17的material Select 字段的高度

<mat-form-field appearance="outline">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value?.[0] || ''}} @if ((toppings.value?.length || 0) > 1) {
      <span class="example-additional-selection">
        (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ?
        'other' : 'others'}})
      </span>
      }
    </mat-select-trigger>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">{{topping}}</mat-option>
    }
  </mat-select>
</mat-form-field>

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 4%; /*you can tweak around with this, */
    margin-bottom: -15%; /*and this*/
}

/*you also have to adjust the label, after the above*/
.mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label {
    top: 50%;
}
.mdc-floating-label--float-above{
    top: 80% !important;
}

Html相关问答推荐

后续使用收件箱从网页表中提取值

如何阻止Chromecast图标出现在HTML5视频

如何在一张表中逃脱边境坍塌--崩溃？

摆动的html标签

使用响应迅速的网格系统，将两列保持在同一行，同时允许更多列用于更大的屏幕

将导航项目底部边框与导航栏对齐

如何从多个TO中获取一个范围标记以溢出其父标记

如何显示自定义按钮以将产品添加到WooCommerce购物车？

柔性盒内的物品；t覆盖整个宽度，即使设置为100%

带有图像的虚线边框

MUI 日期 Select 器要包含的日期

当我们在vue中使用截断大文本时如何显示标题属性？

显示填充正方形的图形的简单页面的 HTML 代码

调整屏幕大小时标题在图像下方重叠 - HTML

在随机图像下对齐文本

使用 css 将内容居中并向左对齐？

项目的水平列表：倒数第二个项目居中，而最后一个项目占据所有剩余空间

在不扭曲图像的情况下将图像放入灵活的 Div 框内

CSS 网格自动高度不适用于特定网格区域

如何将图像高度设置为等于文本高度？