将标签以斜角材料移到输入上方

Question

我当前在项目中使用angular material，并且要求我移动输入标签。 当前，当您开始输入输入内容时，它们会移动，因此标签的中间位置在输入的顶部边框上。 我需要将它们移动到输入顶部的上方。 这是当前示例的示例：

我试图通过添加此sass来解决此问题：

.mat-form-field-appearance-outline {

  .mat-form-field-outline-start,
  .mat-form-field-outline-end,
  .mat-form-field-outline-gap {
    border: 2px solid currentColor !important;
  }

  .mat-form-field-outline-gap {
    border-left: none !important;
    border-right: none !important;
  }

  .mat-form-field-outline-start {
    border-radius: 25px 0 0 25px !important;
    border-right: none !important;
  }

  .mat-form-field-outline-end {
    border-radius: 0 25px 25px 0 !important;
    border-left: none !important;
  }

  .mat-form-field-wrapper {
    margin: 0 !important;
  }

  .mat-form-field-flex {
    // This padding centers the text
    padding: 2.75px 25px !important;
  }

  .mat-form-field-infix,
  .mat-form-field-label-wrapper {
    border-top: 5px solid transparent;
  }

  .mat-form-field-outline {
    color: $off-white;
    background-color: $off-white;
    border-radius: 25px;
  }

  &.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
    color: $warm-red; // TODO: Add the theming
  }

  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  &.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-30px) scale(0.75);
  }
}

.mat-form-field-label-wrapper {
  padding-top: 10px;
}

只有这些行才实际移动标签：

.mat-form-field-appearance-outline {
  &.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
  &.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label {
    transform: translateY(-30px) scale(0.75);
  }
}

.mat-form-field-label-wrapper {
  padding-top: 10px;
}

但是我希望您看到我们使用的其余格式。 我的解决方案存在的问题是文本被截断了：

有人知道如何解决此问题吗？

Answer 1

在我的情况下（角材料11.0.0），这是一个可行的解决方案：

    .mat-form-field-label-wrapper {
    transform: translateY(-20px) !important;

    .mat-form-field-label {
      transform: translateY(-20px) !important;
    }