调整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;
}

我试着调整右边距和向右平移，但似乎都不起作用……这种差距依然存在。

我有没有办法做到这一点？

提前谢谢你。

Answer 1

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

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

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

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