Javascript 有人有好的浮动标签吗？

不久前，我发现浮动标签，我一直在寻找一个类似的工作标签，因为

我试过一对看起来不错的，一开始似乎还不错的，但他们也有自己的问题，比如他们要么需要具有必需的属性，否则他们的标签看起来就像一个普通的标签，要么当输入的类型是电子邮件时，标签会下降

---

所以我想知道是否有人有一个好的替代品，我可以使用。

材质设计有一个很好的浮动标签选项。你可以在这里测试一下。

---

我为您创建了一个快速片段。你可以相应地调整它。希望能有帮助

通过一些过渡和标签的绝对定位，我们可以实现这种效果

如果你有任何问题，打电话给我；）

。输入包装器{
位置：相对位置；
}
.input包装器.input{
填充：8px；
边界：0；
边框底部：1px实心#aaa；
大纲：0；
过渡：所有.15秒放松；
}
.input包装器。输入：悬停{
边框底色：#444；
}
.input包装器.input:焦点{
边框底色：#6200EE；
}
.input包装器.input:焦点+.label，
.input包装器。输入：有效的+.label{
顶部：-8px；
左：4px；
}
.input包装器.label{
位置：绝对位置；
左：8px；
顶部：10px；
填充：0.4px；
背景色：#fff；
字体大小：14px；
线高：1；
颜色：#444；
过渡：所有.15秒放松；
}

标签

这一个看起来像我想要的那样，但在你点击后它会返回。这只是一个简单的例子，你可以用JavaScript实现这个效果。我调整了代码片段以获得您想要的效果，但只使用CSS。谢谢您的编辑！“输入型电子邮件”的问题是，当您输入无效电子邮件（例如，仅输入字符串）时，标签会再次下降，但当它是普通电子邮件时，标签会起作用。您是否有解决方案？您可以使用javascript侦听更改事件并检查值。如果值长度大于0，则向输入包装器添加一个类，该类处理标签位置。如果此答案被否决，任何机构都可以对否决权进行评论？希望您至少尝试自己编写此代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试了什么。