css - 调整 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

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