javascript - 如何为登录页面创建动态占位符？

Question

当前的 GMail 登录页面有一个“电子邮件或电话”占位符文本，该文本会缩小并移至焦点所在字段的左上角。如何使用 CSS 和/或 JS 实现类似的功能？

标签： javascriptcsswebgoogle-signinlogin-page

Answer 1

首先，欢迎来到 StackOverflow！

它被称为“浮动标签”，它可以通过单独使用 CSS 来实现（如果你不熟悉 :focus 和 :empty 之类的伪选择器，这可能会有点困难）或使用一点 JS ，这可能会更容易一些。

您可以在这里查看一些示例：https ://css-tricks.com/float-labels-css/