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

Question

我想让 label 出现在输入字段内。 见下文：

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

https://codepen.io/magooo/pen/JjELwrx

.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 的边框底部是重叠的。当我点击 v-text-field 时，我无法将边框颜色更改为主要颜色。

有人可以帮我解决问题吗？ 提前致谢：）

Answer 1

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

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

希望它有所帮助！