如何对齐左反转的 v-text-field 标签

【问题标题】：How to align left reversed v-text-field label如何对齐左反转的 v-text-field 标签
【发布时间】：2020-09-28 05:03:57
【问题描述】：

v-text-field 的reverse 属性可以使其文本右对齐。

但我想保留标签，所以我需要一种控制标签位置的方法。

我该怎么做？

<v-text-field reverse label="number input" append-icon="mdi-magnify" type="number"></v-text-field>

【问题讨论】：

【解决方案1】：

您可以创建一个 CSS 类以应用于以标签为目标并覆盖定位的文本输入。

.label-left

.label-left .v-label {
  left: 0 !important;
  transform-origin: top left !important;
}

现在您可以将 label-left 类应用于反向输入。

<v-text-field
  class="label-left"
  reverse
  label="number input"
  append-icon="mdi-magnify"
  type="number"
></v-text-field>

【讨论】：