更改 vuetify v-field 标签字体大小

Question

我正在尝试自定义 v-text-field 标签的字体大小。我遇到的问题是，当单击字段时，标签通常会过渡到字段的顶部并变小，但在我的情况下，其大小在过渡完成后再次设置为定义的值。您可以在此处看到过渡结束时文本如何“弹出”： https://play.vuetifyjs.com/#eNpdj8tOwzAQRX/l4k1AIg1sS4rEdxAWJp0gS7Zj2ZOoNMq/1 49Uaruxfa9GZ46/FxF833w5t5snEnvRMhmnJdNnZ4F2rqVz+ZlDP1qWypLfqlwynbgeFOkj5tqMR9KH Tpjw1wlo+ZuTlDKm5gpqHkmpKYva5kYgxtB75RiBeCoeyrjRMxZ4GrBi8KNBFd2rNA5EbmDE7Tikiee qeknQgtmQ/K/L93Z38jFl33jnoiQsRXqIwnVQZ9rj/c2d8FREpOWPNLDMLRtZrK920jofPxeSQHc2

有谁知道如何防止这种情况发生？

Answer 1

您的规则将覆盖标签和浮动标签的字体大小。这里我们可以通过以下方式分别设置它们的字体大小：

  /* label before click */
  .v-text-field .v-label.v-field-label:not(.v-field-label--floating) {
    font-size: 10px !important;
  }
  /* floating label (after click) */
  .v-label.v-field-label--floating {
    font-size: 7.5px;
  }

游乐场