Vuetify：如何在输入中出现 v-text-field 标签

Question

我希望该标签出现在输入字段中。见下文：

在vuetify 2.4.9版本中，我选择填充的属性并添加CSS以使用下面的codepen构建边框：

.theme--light.v-text-field--filled > .v-input__control > .v-input__slot {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.38);
}

但是我发现 v-text-field 的 border-bottom 是 overlapping.And 我无法在点击 v-text-field 时将边框颜色更改为原色。

有人可以帮我解决这个问题吗？提前致谢:)

Answer 1

输入的底部边框通过 .v-input__slot 的 :before 放置， https://codepen.io/eligiv/pen/wvgmbjX

我将 :before 放入 display: none 并设计了主输入（通过 scss）。

希望对您有所帮助！

Vuetify: how to appear v-text-field label inside input