调整 mat-form-field 浮动标签间隙答案

【问题标题】：Adjust mat-form-field floating label gap调整 mat-form-field 浮动标签间隙
【发布时间】：2021-08-02 16:02:30
【问题描述】：

我正在尝试调整浮动标签和它旁边的边框之间的间隙。

如下图所示：

右侧的浮动标签和边框之间的间隙更大。我想调整一下，使两边的间隙均匀。

目前为止浮动标签的样式：

mat-form-field span.mat-form-field-label-wrapper label {
    color: white;
    opacity: 0.5;
}

.mat-form-field-label-wrapper {
    transform: translate(1.3em, -0.3rem);
}

.mat-form-field.mat-focused .mat-form-field-label {
    font-size: 0.75rem;
    color: white;
    opacity: 1;
}

我尝试弄乱margin-right并向右平移，但似乎没有任何效果......这种差距仍然存在。

有什么办法可以做到吗？

提前谢谢你。

【问题讨论】：

您需要使用迄今为止尝试过的代码来更新您的问题以获得该结果。
@m4n0 问题已更新。

标签： css angular angular-material mat-form-field floating-labels

【解决方案1】：

您要调整的元素是 div 类 mat-form-field-outline-gap。问题是它有一个基于标签文本动态生成的静态宽度。

解决此问题的一种方法是为 mat-form-field-outline-gap 类设置负边距：

.mat-form-field-outline-gap {
  margin-right: -6px;
}

https://stackblitz.com/angular/lmgyydoebpro?file=src%2Fstyles.scss

【讨论】：

不客气！我同意，他们有时会很痛苦。我很乐意看一下。