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

问题描述

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

如下图所示，在第二张图片上：

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

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

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

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

提前致谢。

解决方法

您要调整的元素是类 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