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

Posted 2023-02-16

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

【英文标题】：Vuetify: how to appear v-text-field label inside input

【发布时间】：2021-07-08 18:09:06

【问题描述】：

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

在 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 时，我无法将边框颜色更改为主要颜色。

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

【参考方案1】：

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

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

希望对您有所帮助！

【讨论】：

感谢您的帮助！但我还有一个问题无法解决。当我点击v-text-field？使边框看起来就像边框底部一样。在此先感谢 :)