Vue/Tailwind 中的浮动标签

Posted 2023-03-06

【中文标题】Vue/Tailwind 中的浮动标签

【英文标题】：Floating Label In Vue/Tailwind

【发布时间】：2021-06-05 02:47:47

【问题描述】：

我希望为输入表单字段找到一个浮动标签，将标签放在边框中，以便在我的 Tailwind CSS/Vue 项目中使用。我查看了几个选项：

https://csslayout.io/patterns/floating-label/ 仅使用 CSS。它在 Tailwind 之外工作得很好，但是当我导入 Tailwind 时它停止工作（我安装了 Tailwind/Forms 插件，但这似乎并没有解决它）。添加 Tailwind 后，我什至无法键入文本框。这是为什么呢？

https://notiz.dev/blog/floating-form-field-with-tailwindcss 更复杂，但我让它工作，直到我把它放在一个具有背景颜色的 div 中，然后占位符消失。

有人有什么建议吗？我是 Tailwind 的初学者，所以我猜我只是不知道一些可以让事情顺利进行的基本知识。

【问题讨论】：

我想我找到了我遇到的问题。第一个示例需要在输入元素中指定 type=text。它还需要将文本颜色设置为文本黑色。我猜我在第二个示例中遇到的问题也将通过设置文本颜色来解决。谢谢。

【参考方案1】：

我想我找到了我遇到的问题。第一个示例需要在输入元素中指定 type=text。它还需要将文本颜色设置为文本黑色。我猜我在第二个示例中遇到的问题也将通过设置文本颜色来解决。谢谢。