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

【问题标题】：Vuetify: how to appear v-text-field label inside inputVuetify：如何在输入中出现 v-text-field 标签
【发布时间】：2021-07-08 18:09:06
【问题描述】：

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

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

有人可以帮我解决这个问题吗？在此先感谢:)

【问题讨论】：

【解决方案1】：

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

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

希望对您有所帮助！

【讨论】：