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

Question

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

正如您在下面看到的，在第二张图片上：

右侧浮动标签和边框之间的间隙较宽。我想调整一下，让两边的差距均匀。

我目前拥有的浮动标签样式：

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 并向右平移，但似乎没有任何效果......差距仍然存在。

有什么办法可以做到这一点吗？

提前致谢。

Answer 1

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

解决此问题的方法是为 mat-form-field-outline-gap class:

设置负边距

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

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

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

Adjust mat-form-field floating label gap

css

angular

angular-material

mat-form-field

floating-labels