Javascript 这种类型的输入标签是如何实现的？

我试图弄清楚这些HTML输入是如何实现的：

谷歌使用这些输入，其中占位符向上过渡到角落，并在单击输入后成为标签。我以为他们是在用

和

来实现这一点，但检查代码表明他们使用的是带有div的输入。。有没有一种我从未听说过的本土方法来实现这一点，或者有人知道这是如何实现的

---

您可以使用条件选择器仅使用html+css来实现这一点。小提琴示例：

main{
位置：绝对位置；
字号：18px；
字体系列：无衬线；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
输入{
字体大小：继承；
字体家族：继承；
边界半径：4px；
边框：实心浅灰色1px；
填充：16px；
最小宽度：300px；
}
输入+标签{
位置：绝对位置；
顶部：8px；
左：10px；
颜色：灰色；
转变：转变0.2s；
背景：白色；
填充：10px；
指针事件：无；
}
输入：焦点+标签{
转换：缩放（0.75）转换（-24px，-40px）；
}

单击输入